bunshi-router

Lightweight open-source library to provide routing based on bunshi and jotai-location.

Usage

Create routes within a router to render them according to the current location.

import {Route, Router} from "./Router";

const MyComponent = () => {

    return <Router>
        <Route path={"/dashboard"}>
            <Home/>
        </Route>
        <Route path={"/user/{userId}/..."}>
            <Dashboard/>
        </Route>
        <Route>
            <Fallback/>
        </Route>
    </Router>

}

You can control the initial route of nested routers by two parameters:

• root: indicates that the router should ignore any route it finds itself in and start routing from an empty path
• base: adds a prefix to any route considered by this router

Within a route, you can use the useParameters() hook to access the current path variables.

import {useParameters} from "./Scope";

const Dashboard = () => {

    const {userId} = useParameters()

    return <>
        Hello {userId}
    </>

}

Router nesting

Navigating

The library offers the useGo()hook as an utility to navigate, as well as several functions to be used with it.

import {back, into, to, useGo, withParameters} from "./Go";

const OrderList = () => {

    const go = useGo()
    const openSettings = go(to("/settings"))
    const returnToDashboard = go(back(1))
    const openOrderDetails = (order: Order) => go(into(order.id))
    const openUserProfile = go(withParameters({
        userId: "1234"
    }, to("/profile/{userId}")))

    return <>
        ...
    </>
}

Alternatively, you can set the location obtained from the route molecule directly.

Route molecule

The route molecule exposes the current route pattern (e.g /dashboard/{userId}), the location atom and the parameters atom (read-only).

import {useMolecule} from "bunshi/react";
import {RouteMolecule} from "./Scope";
import {useAtomValue} from "jotai";

const Component = () => {

    const route = useMolecule(RouteMolecule)
    const location = useAtomValue(route.location)
    const parameters = useAtomValue(route.parameters)
    
    return <>
        The current route is {route.pattern.value}
    </>

}