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.