New in v5.2: for the cleanest setup with type-safe routes and autocomplete on navigation, see defineRoutes(). The pattern below still works perfectly — defineRoutes() is a recommended addition on top, not a replacement.

Installation

Install the package using your preferred package manager:

npm 
 
 
Requires Node.js 22+ for production builds (Node 20 has Svelte 5 compatibility issues).
				See What's New for the latest release highlights.
 
Basic Setup
 
Follow these three simple steps to get your router running:
 
1. Define Your Routes
 
Create a routes configuration object mapping paths to Svelte components:
 
routes.js 
 
 
 
2. Add the Router Component
 
Import and use the Router component in your main App component:
 
App.svelte 
 
 
 
3. Create Navigation Links
 
Use the link action to make links work with the router:
 
Navigation.svelte 
 
 
 
Choose Your Routing Mode
 
The router supports two modes: Hash mode (default) and History mode.
 
Hash Mode (Default)
 
URLs: example.com/#/about
 
Advantages:
 
  • No server configuration needed
    •  
  • Works on static hosting
    •  
  • Works with file:// protocol
 
Setup:
 
main.js 
 
 
 
History Mode
 
URLs: example.com/about
 
Advantages:
 
  • Clean URLs without #
    •  
  • Better SEO
    •  
  • Better user experience
 
Setup:
 
main.js 
 
 
 
Note: History mode requires server configuration. See the Routing Modes page for details.
 
Your First Route Component
 
Route components are regular Svelte components. Here's a simple example:
 
Home.svelte 
 
 
 
Route Components with Parameters
 
Access route parameters via props:
 
UserProfile.svelte 
 
 
 
What's Next?
 
Route Parameters
 
Learn about dynamic routing with parameters and wildcards
 Learn More →
 
Navigation Guards
 
Protect routes and prevent navigation when needed
 Learn More →
 
Querystring Helpers
 
Work with URL query parameters reactively
 Learn More →
 
Try the Live Examples
 
See the router in action — two live deploys, same source, different routing modes:
 
🚀 History Mode 🔗 Hash Mode
 
Running locally: make dev (port 5050, history) or make dev-hash (port 5051, hash). See Examples for the full per-feature deep-link list.