Installation
Install the package using your preferred package manager:
npm
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?
Try the Live Examples
See the router in action with our interactive examples: