Svelte nested routing example

[artecoop]

I'd love to see a clear example of how to make a nested routing in svelte (or framework agnostic) to better comprehend how it works. Readme points out how to do it, but marginally and without a real example. Please 🙏🙏🙏

[alshdavid]

Sure thing! Am working on a large project using the router so will be some delay before I get around to expanding the readme on that. Here is an example of a react implementation:

It's using the hooks API to abstract the creation of the router, but essentially all you need to do is

• Grab an element reference to project a nested router inside
• Create a new router and project it into the reference
• Set the parent router to not redraw between the routes for the nested router by using /page/**
• Set the nested router to be in charge of /page/a /page/b

https://stackblitz.com/edit/react-9rbwas

If you get the chance to put together something in stackblitz that illustrates this, that would be great!

[artecoop]

Yoo! stackblitz does not support svelte 3 right now. I uploaded a repo here on github https://github.com/artecoop/svelte-crayon

But it does not render nested router. In fact it clears the whole page like there is an error, but no console or other error during compilation

[alshdavid]

Hmm, Svelte could be rerendering the page unexpectedly, deleting the nested router. You might need to use sveltes natural element reference obtaining capabilities to achieve this

bind:this={myElement}

https://svelte.dev/docs#bind_element

[alshdavid]

Hey spent some time messing with your example and I have it working. Check it out here: svelte-crayon-router-pftoxd.zip

Though, in doing so I found there is a bug in the mounting for the svelte middleware allowing it to only go one level deep. Thanks for getting me to look into this. I'll address the bug in an upcoming release.

[artecoop]

Hey @alshdavid, I'll try it today. Thanks for your support!

[alshdavid]

No worries, thank you for using my project!