Shallow Routing (prevent reload)

[bruceharrison1984]

Is there an easy way to prevent reloading of the entire route when changing a search param? My use case is keep track of which tab menu the user is on, but updating the URL via Route.navigate triggers a full-page load.

[SeanCassiere]

Whenever, your URL changes, it's considered to be a new route entry as it is in the browser.

You can ofc. track this and choose to short-circuit the loader, but that'd be outside the purview of Router.

[jhleao]

With a bit of trial and error and eventual realization this was documented, I managed to emulate this.

I am using file based routing, and achieved this by having the root route defined as a named file outside of the sub-directory, e.g.:

Doesn’t work:

| - your-route/
| | - index.tsx
| | - $tab.tsx

Works:

| - your-route.tsx
| - your-route/
| | - $tab.tsx

Also works:

| - your-route.tsx
| - your-route.$tab.tsx

Then just render the same component in both routes. This way, navigating to/from root and children seems to keep the component mounted.

That said, I am not sure rendering the same component in nested routes is stable library behavior... so what seems to be a more proper way to achieve this, is to render your tabs in children routes entirely, and an <Outlet /> in the parent component.

[worachot-c]

You save my life. Thank you very much.

[isaackoz]

I think you could achieve this with a splat route and sessionStorage. I had a case where I needed to change the url without re-fetching data and came up with this solution. sessionStorage seems like the perfect choice for this since it won't survive a page refresh and is scoped to only the current tab. I tried experimenting with masked routes, the HistoryState api, etc., but it felt like I was just fighting the router api the entire time. This has been working great for me and haven't run into any issues with it!

---

In your loader

const isShallow = sessionStorage.getItem("isShallow") === "true";
sessionStorage.removeItem("isShallow");
// if it's shallow, return early
if(isShallow) {
    return{
        isShallow
    }
}
// otherwise continue as per usual

In your component

const isShallow = Route.useLoaderData({ select: (s) => s.isShallow });
// this is useful if you use tanstack query and need to pass it to the enabled param in useQuery

And finally the actual navigation

<button
  onClick={(e) => {
    // dont forget this!
    sessionStorage.setItem("isShallow", "true");
    router.navigate({
      to: "/chat/$",
      params: { _splat: "853c2a18-b171-4065-936d-9d99140101bc" },
    });
  }}
>
  click me
</button>