svelte-spa-router
GitHub
Documentation /Getting started

Getting started

You can use svelte-spa-router in any project built with Svelte 5.

Install from NPM#

To add svelte-spa-router to your project:

# Using npm
npm install svelte-spa-router
# Using yarn
yarn install svelte-spa-router
# Using pnpm
pnpm install svelte-spa-router

Define your routes#

Each route is a normal Svelte component, with the markup, scripts, bindings, etc. Any Svelte component can be a route.

The route definition is just a JavaScript dictionary (object) where the key is a string with the path (including parameters, etc), and the value is the route object.

For example:

import Home from './routes/Home.svelte'
import Author from './routes/Author.svelte'
import Book from './routes/Book.svelte'
import NotFound from './routes/NotFound.svelte'

const routes = {
    // Exact path
    '/': Home,

    // Using named parameters, with last being optional
    '/author/:first/:last?': Author,

    // Wildcard parameter
    '/book/*': Book,

    // Catch-all
    // This is optional, but if present it must be the last
    '*': NotFound,
}

Routes must begin with / (or * for the catch-all route).

Alternatively, you can also define your routes using custom regular expressions .

Note that the order matters! When your users navigate inside the app, the first matching path will determine which route to load. It’s important that you leave any “catch-all” route (e.g. a “Page not found” one) at the end.

Include the router view#

To display the router, in a Svelte component (usually App.svelte), first import the router component:

import Router from 'svelte-spa-router'

Then, display the router anywhere you’d like by placing the component in the markup. For example:

<body>
    <Router {routes}/>
</body>

The routes prop is the dictionary defined above.

That’s it! You already have all that you need for a fully-functional routing experience.

Sample code#

Check out the code in the examples folder for some usage examples.

To run the samples, clone the repository, build the package, then start a sample:

# From the repo root: install deps and build the package
pnpm install
pnpm run build

# Navigate to a sample
cd examples/…
# For example
cd examples/basic-routing

# Start a development server
pnpm install
pnpm run dev

The sample will be running at http://localhost:5173

Next steps#

Edit this page on GitHub