Svelte Router

Before you start, I'd highly recommend checking out SvelteKit first. It has a flexible filesystem-based router officially supported by the Svelte team.

An easy-to-use SPA router for Svelte.

Comparison with other routers

Features

• Super simple API
• Support hash and path based navigation
• Nested routes
• Redirects and navigation guards (with async support)
• Lazy loading routes
• Auto base tag navigation

Not Supported

• Server-side rendering (SSR) - Use SvelteKit instead
• Relative navigations - Use absolute path and dynamic syntax instead

Quick Start

Install @bjornlu/svelte-router:

$ npm install @bjornlu/svelte-router

Define routes:

// main.js

import { initPathRouter } from '@bjornlu/svelte-router'
import App from './App.svelte'
import Home from './Home.svelte'

// Use `initHashRouter` for hash mode
initPathRouter([{ path: '/', component: Home }])

const app = new App({
  target: document.body
})

export default app

Render routes and links:

<!-- App.svelte -->

<script>
  import { RouterView, Link } from '@bjornlu/svelte-router'
</script>

<main>
  <nav>
    <Link to="/">Home</Link>
  </nav>
  <RouterView />
</main>

Done!

Documentation

Ready to learn more? The documentation is split into two parts:

• Guide: Covers common usage to advanced topics
• API reference: Covers the structure of the API

Examples

• Basic: Basic router usage
• Lazy loading: Lazy loading setup example

Contributing

All contributions are welcomed. Check out CONTRIBUTING.md for more details.

License

MIT