An SPA router for Svelte that allows you to divide & conquer your app with nested routers, snippets, and more.
- Built for Svelte 5 🚀!
- Divide & conquer - use nested routers all over the place.
- Use components, snippets, or both 🔥!
- Use regex paths (e.g.
/foo/(.*?)/bar) and/or named parameters together. - Use async routes simply with
component: async () => import("./my-component.svelte"). - Add hooks to your routes to control the navigation flow 🔧.
- Automagic styling of your anchor tags 💄.
- Helper methods 🛠️ to make your life easier.
- Debugging tools included 🔍.
Version 2.16.7 released! 🎉 with some healthy updates!
- 🔧 Added support for passing your own props down to the routed component (#70 - thanks @inZaCz).
- 🐛 Fixed a bug where the router would not re-render the same component when the route changes.
- 📊 Added Router Architecture Diagrams to give you a better understanding of how the router works.
- 🎉 New demos for more patterns and use cases at https://demo.router.svelte.spa/patterns.
Note
I'd like to share what svelte5-router is doing in the wild! If you're using it, please share your project with me by sending me a message on discord at @mateothegreat or just create a new issue and I'll add it to the list. 🙏
npm install @mateothegreat/svelte5-routerWant the easy button? Here ya go!
- Getting Started
- Routing
- Hooks
- Actions
- Helper Methods
- Default Status Mapping
- The Router Registry
- Route Styling
- Accessing Props
- Debugging
- Diagrams
Note
Include llms.txt in your LLM prompt to get add rich context to your tasks by referencing https://github.com/mateothegreat/svelte5-router/refs/heads/main/llms.txt.
When the browser URL changes, the router instance is triggered. It then registers the route in the registry, evaluates the route matching, and resolves the route.
Note
You can view more diagrams in diagrams.md.