codechips-svelte-router Svelte Themes

Codechips Svelte Router

codechips-svelte-router

Lightweight Svelte routing solution. Based on this implementation of page.js by codechips.

Getting started

Pick your favorite package manager:

$ yarn add -D codechips-router
$ npm i -D codechips-router

Edit your App.svelte component

<script>
    import { Router, Route } from "codechips-router";
    import {
        Home,
        About,
    } from "views/index.js";
</script>

<main>
    <Router>
        <Route path="/" component={Home} /> <!-- You can pass the component as a prop -->
        <Route path="/about"> <!-- Or add it directly inline -->
            <h1>About</h1>
            <p>Lorem ipsum dolor sit amet.</p>
        </Route>
    </Router>
</main>

Features

Adding a custom 404 page

<script>
    import { Router, Route, NotFound } from "codechips-router";
    // ...
</script>
<Router>
    <!-- ... -->
    <NotFound>
        <p>Page not found</p>
    </NotFound>
</Router>

Protected routes

To be continued...

Top categories

Loading Svelte Themes