Tiny router for Svelte 5 SPAs. Runes friendly.
/user/:id
)npm install @ryuz/rsv
<script lang="ts">
import { Router, Route, navigate, useRsv } from '@ryuz/rsv';
</script>
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/user/:id" component={User} />
<Route><!-- fallback route, rendered if no other matches --></Route>
</Router>
RSV supports both history and hash-based routing. Hash mode is useful for SPAs that are served from static file hosts or environments where server-side routing is not available.
Set the mode
prop on the Router
component:
<Router mode="hash">
<Route path="/foo" component={Foo} />
<Route path="/bar" component={Bar} />
</Router>
When using hash mode, anchor tags should use href="#/your-path"
to ensure navigation works as expected:
<a href="#/bar">Go to Bar</a>
Imperative navigation (router.navigate('/bar')
or navigate('/bar')
) works the same in both modes.
/#/foo
instead of /foo
If a route contains :param
, the matched value is passed as a prop:
<Route path="/user/:id" component={User} />
<!-- User receives prop { id } -->
If you omit the path
prop, the Route acts as a fallback:
<Route><!-- This renders if no other Route matches --></Route>
import { navigate } from '@ryuz/rsv';
navigate('/about');
navigate('/login', { replace: true });
import { useRsv } from '@ryuz/rsv';
const router = useRsv();
const currentPath = $derived(router.path);
router.getQueryParam(key)
– get a query param valuerouter.hasQueryParam(key)
– check if param existsrouter.removeQueryParams([keys])
– remove query params from URLrouter.getParam(key)
– get a dynamic route param value (e.g. id
from /user/:id
)<Router>
<Route>
components.url
(optional): initial path for SSR/testingchildren
: Route components (via slot)<Route>
path
(supports dynamic segments, e.g. /user/:id
).path
(optional): route pattern. If omitted, acts as fallback route.component
(optional): Svelte component to renderchildren
: fallback content if no component
prop:id
) are passed as props to the rendered component and are also accessible via router.getParam(key)
.navigate(to: string, options?: { replace?: boolean })
replace
: if true, replaces history entryuseRsv()
path
: current pathroutes
: all registered route patternsquery
: query params as objectparams
: dynamic params as objectnavigate(to, options)
: navigation functiongetQueryParam(key)
: get query param valuehasQueryParam(key)
: check if query param existsremoveQueryParams([keys])
: remove query params from URLgetParam(key)
: get dynamic route param valuePrior art - svelte-tiny-router