Router does not trigger loader or beforeLoad when navigating to same url

[Jarzka]

Describe the bug

Hi

I have a search form view which contains some search options as html inputs and a search button. It works like this:

I press "Search" button, which does nothing but programmatically navigates to the current path + also incudes some query params. This causes the load and beforeLoad functions of the current route to trigger, looking for the updated search parameters and performing the search.

If I now press the "Search" button again, without making any changes to the search parameters, it programmatically navigates to the current url again. This time, load and beforeLoad functions are not executed. It seems that these functions are not executed if the url of the page has not changed.

There should be away to make these function trigger even if the navigation occurs to the same url. Otherwise, I cannot perform the same search again.

I tried including shouldReload: true option for the route, but it did not help.

This worked well in 0.0.1-beta.185 but not in 1.19.4

[schiller-manuel]

please provide a minimal complete example, e.g. by forking one of the existing examples on stackblitz

aside from that, loaderDeps might be missing

https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#key-options

[Jarzka]

I investigated my situtation even further and I think that previously loader and beforeLoad were called due to the fact that I was using router.invalidate() as a part of the "Search" button click. If I remove it, the functions are not triggered if url is not changed after the button press. However, if I keep it, the loaders are triggered.

I agree that giving a minimal working example would be beneficial in any situtation when trying to resolve bugs. Unfortunately, I am quite busy right now as we have already spent a whole work week trying to upgrade the router library. 😆 I hope the API is going to stay more stable now that you have passed the version 1.x milestone.

[schiller-manuel]

I was able to reproduce this.
Bug was introduced in 1.18.4.

Reproducer:

1. click on "open preview in new tab"
2. open developer tools to see console logs
3. click on "search"
4. click on "click me".

shouldReload, loaderand beforeLoad should log each time "click me" is clicked.

working in 1.18.3: https://stackblitz.com/edit/tanstack-router-acssx4?file=src%2Froutes%2Fsearch.tsx
not working in 1.18.4: https://stackblitz.com/edit/tanstack-router-hfpfdi?file=src%2Froutes%2Fsearch.tsx%3AL24

[Jarzka]

Great to hear you were able to reproduce the bug! Hopefully we will get a fix for it. :)

[mta-trackunit]

any known workarounds ? or an update for a fix?

[rajbirjohar]

@mta-trackunit
Not sure if this is at all related but I kept getting the white screen due to what I think is some race condition when attempting to run a beforeLoad function while updating the query params. This is my solution:

export const Route = createFileRoute('/_protected')({
  component: ProtectedLayout,
  beforeLoad: async ({ context, navigate, location }) => {
    const validated = await context.auth.validate();
    console.log('validated', validated);
    if (!validated) {
      console.log('redirecting');
      throw redirect({
        to: '/',
        search: {
          // Use the current location to power a redirect after login
          // (Do not use `router.state.resolvedLocation` as it can
          // potentially lag behind the actual current location)
          redirect: location.href
        }
      });
    } else {
      // Work around a bug in the router where the location is not updated
      navigate({
        to: location.href
      });
    }
  }
});

Also, not even sure how to access router within beforeLoad and nothing in docs tells us where to import it from.

[SeanCassiere]

shouldReload, loaderand beforeLoad should log each time "click me" is clicked.

Retesting this with the 1.32.12 release, the console logs get logged out on every click.

Retest: https://stackblitz.com/edit/tanstack-router-mvbt6c?file=src%2Froutes%2Fsearch.tsx

Is this still an issue?

[rajbirjohar]

@SeanCassiere No, the issue that I have is that I have some tabs that update the URL with a search parameter to persist the view but it seems like some exception is thrown or there is a race condition when beforeLoad runs executing my async validation function. It causes a white screen which requires a manual refresh to see the page. The only way I got around it was by force navigating but I thought I wouldn't have to do that.

[SeanCassiere]

@SeanCassiere No, the issue that I have is that I have some tabs that update the URL with a search parameter to persist the view but it seems like some exception is thrown or there is a race condition when beforeLoad runs executing my async validation function. It causes a white screen which requires a manual refresh to see the page. The only way I got around it was by force navigating but I thought I wouldn't have to do that.

@rajbirjohar will need a reproduction for this.