@amoutonbrady/solid-tiny-router

Solid Tiny Router

Experimental and personal tiny little router based on history & regexparam for solid

Quick start

Install it:

pnpm add @amoutonbrady/solid-tiny-router

Use it:

import { render} from 'solid-js/dom';
import { Component, lazy } from 'solid-js';
import { useAuth } from './fake-auth.ts';
// Minimal exports
import { Router, Route, Link, useRouter, Redirect } from './router';

// It can work with lazy routes
const Home = lazy(() => import('./Home'));

const App: Component = () => {
  // Minimal API
  const [auth] = useAuth();
  const [router, { push }] = useRouter();

  return (
    <>
      {/* This is a reactive URL Object, you can retrieve searchParams, pathname & hash from it */}
      <p>{router.currentRoute.pathname}</p>

      {/* Link */}
      <Link path="/" class="text-blue-700" active-class="underline">Home</Link>
      <Link path="/about">About</Link>
      <button onClick={[push, '/']}>Navigate without a link</button>

      <hr />

      {/* Catch all route */}
      <Switch fallback={<p>404 not found</p>}>
        {/* Routes, pretty much just a wrapper around <Match> that display the content only if the route match the path your provide */}
        <Route path="/" children={Home} />
        <Route path="/about">
          <p>Sweet about</p>
        </Route>
        <Route path="/user/:id">This the user {router.params.id}<Route>

        {/* This is how you'd add a guard to authenticated only routes */}
        <Match when={auth.isLoggedIn()}>
          <Switch>
            <Route path="/admin">Admin route</Route>
            <Redirect path="/login" to="/admin" />
          </Switch>
        </Match>
      </Switch>
    </>
  );
};

render(() => <Router><App /></Router>, document.getElementById('app'))

Live examples

• Basic routes
• Nested routes
• Authenticated routes