Numeric Production Mechanism


    2.1.0 • Public • Published


    History base router for Svelte 3 SPA (Single Page Application).


    • History-base routing
    • path matching and path variable capturing by regular expression
    • resolver (for dynamic routing, code-splitting, data preloading, etc...)

    Not supported features

    • Hash-base routing
    • Nested router
    • SSR (Server Side Rendering)


    $ npm install --save-dev svelte-spa-history-router
    $ # or
    $ yarn add svelte-spa-history-router


    Import Route and put into your main component (typically App.svelte).

    For example:

    # App.svelte
      import { Router } from 'svelte-spa-history-router';
      import Home from './Home.svelte';
      import Article from './Article.svelte';
      import NotFound from './NotFound.svelte';
      const routes = [
        { path: '/', component: Home},
        { path: '/posts/(?<postId>.*)', component: Article},
        { path: '.*', component: NotFound},
    <Router {routes}/>
    • Routes require a routes parameter.

    • routes is a list of route objects. route object has path, component, and resolver properties.

      • path can be a regular expression. ^ and $ are automatically added when matching.
      • component is a SvelteComponent. there are no specific requirements for component.
      • resolver is a function to determine component dynamically (optional).
    • Matching is simply performed in the order defined by routes.


    routeParams is a store to contain matched value to current route.

    For example:

    # Article.svelte
      import { routeParams } from 'svelte-spa-history-router';
    <div class="article">
      postId: {$routeParams.postId}

    Navigation methods

    To navigate another page, link and push are available.

    • link used with a a tag like below
    import { link } from 'svelte-spa-history-router';
    <a use:link href="/">Home</a>
    • push used to navigate programatically
    import { push } from 'svelte-spa-history-router';
    <button on:click={ () => push('/') }>Go to Home</button>


    (Added in v2.0.0)

    Resolver is a mechanism to dynamically determine component and can be used in multiple use cases.

    Example: code spliting (dynamic import)

      import { Router } from 'svelte-spa-history-router';
      const routes = [
        { path: '/', resolver: _ => import("Home.svelte") },
    <Router {routes}/>

    Example: dynamic routing and pass value to component props.

      import { Router } from 'svelte-spa-history-router';
      import Article from "./Article.svelte";
      async function prefetchArticle(route) {
        const article = await getArticle(route.params.postId);
        if (article) {
          // pass value to component props
          route.props.article = article;
          return Article;
        } else {
          return NotFound;
      const routes = [
        { path: '/posts/(?<postId>.*)', resolver: prefetchArticle },
    <Router {routes}/>

    Example: guard

      import { Router, redirect } from 'svelte-spa-history-router';
    import Admin from "./Admin.svelte";
      function adminGuard(route) {
        if (!isAdmin($user)) {
          return redirect("/");
        return Admin;
      const routes = [
        { path: '/', component: Home },
        { path: '/admin', resolver: adminGuard },
    <Router {routes}/>

    Full example:



    2.1.0 (2021-04-29)

    • Add currentURL store to detect URL changes PR6

    2.0.0 (2021-04-15)

    • [Added] resolver
    • [Removed] guard

    1.1.1 (2021-04-12)

    • Fix bug with async guard function causing loop

    1.1.0 (2021-03-26)

    • Add guard


    • Fix import error


    MIT License.


    Generally, history-base router requires server-side routing so that user can open the direct link or reload.

    For example, Nginx excerpt configuration is like bellow.

    location / {
        try_files $uri /index.html =404;

    If you consider to use firebase hosting for your application, rewrite may be useful.


    svelte-spa-history-router is inspired by svelte-spa-router and Svelte Router SPA.

    If you don't need both history-base and regular expression support, I reccommend these powerful routers.


    npm i svelte-spa-history-router

    DownloadsWeekly Downloads






    Unpacked Size

    188 kB

    Total Files


    Last publish


    • ykrods