A lightweight and flexible router for Svelte applications, leveraging the power of the Location API and path-to-regexp for advanced routing capabilities.
pnpm install sly-svelte-router
<script lang="ts">
import { Router } from 'sly-svelte-router';
import type { Routes } from 'sly-svelte-router';
const routes: Routes = {
'/': () => import('./routes/Home.svelte'),
'/about': () => import('./routes/About.svelte'),
'/user/:id': () => import('./routes/User.svelte'),
'/posts/:category/:postId': () => {
name: "posts",
component: () => import('./routes/Post.svelte')
},
'*': () => import('./routes/404.svelte'),
};
const fallback = () => import('./routes/404.svelte');
</script>
<Router {routes} {fallback}>
<div>Loading...</div>
</Router>
sly-svelte-router uses path-to-regexp for powerful and flexible route matching. This allows for:
/user/:id
matches /user/123
and passes {id: '123'}
as a parameter./post/:id?
matches both /post/123
and /post
./files/*
matches any number of segments after /files/
./files/:path+
requires at least one segment after /files/
.Examples:
/user/:id
matches /user/123
/post/:category/:title?
matches /post/tech
and /post/tech/new-article
/files/:path*
matches /files
, /files/document.pdf
, /files/images/photo.jpg
Router
ComponentThe main component for setting up routing.
Props:
routes
: An object mapping route paths to component importsfallback
: A function returning a Promise that imports the fallback componentUse the navigate
function for programmatic navigation:
import { navigate } from 'sly-svelte-router';
navigate('/user/123', { someState: 'value' });
Access route information reactively:
import { currentRoute, queryParams, routeState, routeHash, routeParams } from 'sly-svelte-router';
$: console.log($currentRoute); // Current route path
$: console.log($queryParams); // Map of query parameters
$: console.log($routeState); // Current route state
$: console.log($routeHash); // Current route hash
$: console.log($routeParams); // Object containing route parameters
sly-svelte-router is written in TypeScript and provides type definitions out of the box for an enhanced development experience.
Route components are lazy-loaded by default, ensuring that only the necessary code is loaded for each route, optimizing your application's performance.
MIT
Contributions are welcome! Please feel free to submit a Pull Request.