How to do shallow routing?

[unkempt sky]

What is the recommended way to do shallow routing? Is there some file name one can have when using the vite plugin?

[molten flint]

what exactly does "shallow routing" mean? do you have a concrete example?

[unkempt sky]

i basically mean the way sveltekit does it (https://kit.svelte.dev/docs/shallow-routing)

just a url change but without a whole new page (mainly to make it so a modal shows up when a user opens a page from a url)

[graceful pagoda]

Any update? I came across this. next js, react-router dom provides shallow routing as well

[molten flint]

how does it work in react router?

[trail moon]

@graceful pagoda
According to this link from above, Svelte uses the replaceState to achieve this.

In TSR and React-Router, its just a matter of calling replace: true.

<Link to='/somehwere' replace>Go!</Link>

navigate({ to: '/somewhere', replace: true })

If its navigations to the same page, for the open state of something like a dialog, you can call it without having to supply the to value.

const navigate = Route.useNavigate();
const isOpen = Route.useSearch({ s: s => s.dialog_open })
//     ^? do something with this

const setOpen = (val: boolean) => {
  navigate({ search: (s) => ({ ...s, dialog_open: val}), replace: true })
}

[graceful pagoda]

Shallow routing allows you to update the URL without fully reloading the page or replacing the entire history state. It's different from just using replace: true in history because it appends new components on top of the existing ones. This means the previous components remain in the background, making it ideal for global modals or overlays.

For example, in Facebook/Instagram, when you open a post in a modal, the background feed is still there, and if you refresh, only the modal content reloads. The background state is removed, focusing only on the modal's content.
and it works with history back and forward

[trail moon]

Why can't a search be used for this?

You could even hide the search param using a route mask

https://youtu.be/yTx7zYpq4ok?si=8WZvRttzvccTbieg

[graceful pagoda]

yes, that's what it is, so it's the masking. thanks 👍🏻