adverse-sapphire

How to do shallow routing?

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

9 Replies

metropolitan-bronze•2y ago

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

adverse-sapphireOP•2y ago

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)

SvelteKit docs

Shallow routing • SvelteKit documentation

graceful-blue•16mo ago

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

metropolitan-bronze•16mo ago

how does it work in react router?

typical-coral•16mo ago

@limbo_anj 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 })

<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 })
}

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-blue•16mo ago

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

typical-coral•16mo ago

Why can't a search be used for this? You could even hide the search param using a route mask

typical-coral•16mo ago

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

Dev Leonardo

YouTube

TanStack Router: Route/Location Masking

In React, you might want to show a shorter URL to the user, hiding some query params or parts of the URL entirely. Let's talk about route masking with TanStack Router 🎭 It's not a super common practice, but sometimes it helps. Here are a couple of examples: 1)You want to navigate to a page with some parameters already set. You can pass them int...

graceful-blue•16mo ago

yes, that's what it is, so it's the masking. thanks 👍🏻 Not using search params because, I want to treat it as a page on its own, it needs only ID (it is in fact a single page), even though it appears on the top of other pages. route maske does include this 👍🏻

Gaming

Programming

How to do shallow routing?

Did you find this page helpful?