Repository files navigation

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 withcomponent: 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.15.4 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.
• 📊 AddedRouter Architecture Diagrams to give you a better understanding of how the router works.
• 🎉 New demos for more patterns and use cases athttps://demo.router.svelte.spa/patterns.

npm install @mateothegreat/svelte5-router

Now you can simply:

<ahref="/dashboard"use:route>Dashboard</a>

By addinguse:route you will prevent the page from reloading and instead let the router take the wheel 🤸. Peruse the rest of the documentation atdocs/ for more details.

and/ship-it!

Seeactions.md#route for the deets..

• Getting Started
• Routing
• Hooks
• Actions
• Helper Methods
• Default Status Mapping
• The Router Registry
• Route Styling
• Accessing Props
• Debugging
• Diagrams

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.