@rrfvtgb/solidjs-router v0.1.0

Solid js router (Remake)

A small experiment for handling routes with solidjs.

It include some more modern pratice, like the new DocumentTransition API. Some eager loading has been integrated into this library for some performance purpose.

Installation

Different package manager should be supported

NPM:

$ npm i rrfvtgb/solidjs-router

Yarn:

$ yarn add rrfvtgb/solidjs-router

PNPM:

$ pnpm add rrfvtgb/solidjs-router

Usage

Creating Declaring routes.

import { Router } from "rrfvtgb/solidjs-router";

// Wrap import for page component with default component
async function wrap(module: Promise<{ default?: () => JSX.Element }>) {
    return (await module).default;
}

// Routing
const routes = {
    // `index` page
    _page: () => wrap(import("./pages/index")),

    // Page with parameters
    _default: () => wrap(import("./pages/generic")),

    // Help page
    help: () => wrap(import("./pages/help")),
} as const;

// Your application main page
function App() {
    return <Router routes={routes} useLocation />;
}

Using page with parameters.

import { Link, useRouteParams } from "rrfvtgb/solidjs-router";

export default function GenericPage() {
    const [id] = useRouteParams();

    return (
        <p>
            This is a generic page. #{id} <br />
            <Link href="/">Index</Link>
        </p>
    );
}

Example

See Example folder for a demo and source code