Mobile-style stacked navigation (push/pop) for routes

[maliknajjar]

I have a feature request / question about routing behavior on mobile devices.

In most mobile navigation patterns (e.g. native apps), navigation works using a “stack”:

• When you navigate to a new route, it is pushed onto the stack
• The old route is kept in memory instead of being totally replaced
• A slide-in animation is usually used
• Going back simply pops the last route from the stack

Right now, navigation replaces the current view, similar to a traditional web page. I’d like to achieve a mobile-like behavior where routes are pushed and popped and can have slide transitions like native mobile navigation.

Is this behavior already possible with svelte-router-core in some way?

Thanks again for your work!

[webJose]

Hello. By default, links and the location.navigate() method pushes URL's onto the history stack instead of replacing. Unsure as to why you believe or are experiencing replacing, not pushing. Maybe we should have a look at your code or router configuration because that's not expected.

As for animations, the Svelte REPL linked in the README shows how one can achieve the use of transitions, as this router doesn't provide animations when navigating. It is a very simple thing to achieve, but because of how Svelte defines them today, I decided against this being a feature, at least for now.

Finally, I can tell you that you can even do what Sveltekit calls "shallow routing" with this router. You can, in mobile and desktop, open dialog boxes by pushing state, enabling both mobile and desktop uses use the "Back" button to dismiss the dialog box.

[maliknajjar]

I know that it pushes in the history stack. but I meant to keep the previous page in the dom not just in the history stack.
but I think the "shallow routing" is exactly what I need
can you show us an example or point us to a documentation of how to do it exactly?

[webJose]

Ah, you probably want to preserve state. Sure, right now when you go back, you go back to the previous URL, but the components were unmounted, so input boxes where users wrote something have been reset.

You want state data to follow the URL. I get it.

Yes, in theory, if you save enough, a browser's history object is also capable of saving state, but it is not too practical to use it as a general-purpose component state store because you can only store serializable data in the browser history. If you work with maps, sets, etc., you'll have to introduce serialization of your own.

Hmmmm.... I guess this kind of "magical state" is possible. Sounds like a fun Proof of Concept for a new extension package named @svelte-router/state or something similar.

Basically, make a Router component that is capable of storing state on unload, then have the router help with locating the correct state to reload depending on whether it is new navigation or the user going back or forward in the history.

[webJose]

Shallow Routing

The playground I use to test the router as I code it has an example:

svelte-router-core/playground/src/lib/views/hash-routing/ShowCodeButton.svelte

Line 5 in 192db0d

location.navigate('', { state: { showCodeDialog: true } });

Just navigate to the "empty string" URL and provide whatever state you want. This playground example sets a POJO with the showCodeDialog boolean that controls whether or not the dialog shows or not. The code that makes the dialog appear:

svelte-router-core/playground/src/lib/views/hash-routing/HashRoutingDemo.svelte

Line 159 in 192db0d

{#if location.getState(false)?.showCodeDialog}

By the way, shallow routing can also be accomplished via the Link component:

<Link href="" state={{ showCodeDialog: true }}>...</Link>

[maliknajjar]

but what if I want to have a it in the url and not just in memory
for example when I go to /posts/1
I want it to go to the posts page page open a drawer for that post with id 1
I want to be able to send a url to someone and the drawer would open for him in the posts page

[webJose]

That is possible. Just make your component open the drawer on load. That would be the initial approach. Immediately, I can think of an issue: What if I want to go to /posts/2 that doesn't change routes? 2 options: I use {#key rp} like the live Svelte REPL does to trigger animations when the route doesn't change but the route params change., or I open the drawer in an effect inside the component, so every time the route parameter changes, the components animates the opening of the drawer.

I don't know if this is helpful. If you would like to, we should move this to a discussion (I can convert to discussion) and you provide a basic skeleton repo/project where I can PR into possible solutions whenever I have the time.