svelte-spa-router
svelte-spa-router is a router for Svelte 5 applications, specifically optimized for Single Page Applications (SPA).
Highlights#
- Leverages hash-based routing, which is optimal for SPAs and doesn’t require any server-side processing
- Insanely simple to use, and has a minimal footprint
- Uses the tiny regexparam
for parsing routes, with support for parameters (e.g.
/book/:id?) and more
This module is released under MIT license.
For support for Svelte 3 and 4, please use the v4 branch . See the Upgrading guide for migration instructions.
Hash-based routing#
With hash-based routing, navigation is possible thanks to storing the current view in the part of the URL after #, called “hash” or “fragment”.
For example, if your SPA is in a static file called index.html, your URLs for navigating within the app look something like index.html#/profile, index.html#/book/42, etc. (The index.html part can usually be omitted for the index file, so you can just create URLs that look like http://example.com/#/profile).
When this component was created, other routers for Svelte apps implemented navigation using the HTML5 history API. While those URLs look nicer (e.g. you can actually navigate to http://example.com/profile), they are not ideal for static Single Page Applications. In order for users to be able to share links or even just refresh the page, you are required to have a server on the backend processing the request, and building fully-static apps is much harder as a consequence.
Hash-based routing is simpler, works well even without a server, and it’s generally better suited for static SPAs, especially when SEO isn’t a concern, as is the case when the app requires authentication. Many popular apps use hash-based routing, including GMail!
Video: “So you want to pick a router?”#
“So you want to pick a router?” talk by @ItalyPaleAle at Svelte Summit 2020. It includes an explanation of the two kinds of routers and a demo of svelte-spa-router.
Supported browsers#
svelte-spa-router aims to support modern browsers, including recent versions of:
- Chrome
- Edge (“traditional” and Chromium-based)
- Firefox
- Safari
Support for Internet Explorer is not a goal for this project. Some users have reportedly been able to use svelte-spa-router with IE11 after transpilation (e.g. with Babel), but this is not guaranteed.