solid-tiny-router

Tiny routing library for SolidJS

Install

npm i solid-tiny-router

yarn add solid-tiny-router

pnpm add solid-tiny-router

Features

• Easy to use: Only 2 components and a 2 utility: <Router>, <Link>, useRouter and createRouterTree!
• Link prefetching: load pages ahead of time with router.prefetch and <Link prefetch>.

Usage

import { lazy } from 'solid-js';
import { createRouterTree, Router } from 'solid-tiny-router';

// Declare routes
const routes = createRouterTree([
  {
    path: '/',
    component: lazy(() => import('./pages')),
  },
  {
    path: '/a',
    component: lazy(() => import('./pages/a')),
  },
  {
    path: '/b',
    component: lazy(() => import('./pages/b')),
  },
  // Parametized route
  {
    path: '/parameter/[id]',
    component: lazy(() => import('./pages/[id]')),
  },
  // Wildcard Route
  {
    path: '/wildcard/[...list]',
    component: lazy(() => import('./pages/[...list]')),
  },
]);

const NotFound = lazy(() => import('./pages/404'));

export default function App() {
  return (
    <div>
      <Router
        // Pass routes
        routes={routes}
        // Used for 404
        fallback={<NotFound />}
      />
    </div>
  );
}

// [id].tsx
export default function ParametizedRoute() {
  // Access router
  const router = useRouter();
  // Access parameters
  // For wildcard routes, the params will be an array of string
  const id = () => router.params.id;
  return (
    <div>
      <span>
        {'Welcome to '}
        <span>{`Page ${id()}`}</span>
        !
      </span>
      <div>
        <Link href="/">Go to home</Link>
      </div>
    </div>
  );
}

<Router>

The main routing component. <Router> builds a routing switch from routes and then reactively matches the pages from the window.location. If no matching route is found, fallback rendered, which behaves like a 404 page.

<Link>

Navigation component. Must be used within pages and components controlled by <Router>. <Link> controls the page history and prevents page reload when navigating between local pages.

• prefetch allows the given page to be prefetched. Defaults to true.
• replace replaces the current history instead of pushing a new history.
• scroll scrolls the window to the top of the page after navigation. (Possible values is "auto", "smooth" or just undefined, defaults to "auto".)

useRouter

useRouter provides the router instance for controlling navigation imperatively. This can only be used within pages and components controlled by <Router>.

• pathname is a reactive property for tracking the window.location.pathname.
• search is a reactive property for tracking the window.location.search.
• push(url) pushes a new URL and navigates to the given URL.
• replace(url) replaces the current history and navigates to the given URL.
• prefetch(url, isPriority) prefetches the given URL.
• back() is used to navigate back in history.
• forward() is used to navigate forward in history.
• reload() performs page reload.
• params provides the object based on the parsed URL (if the path of the page is either a wildcard route, a parametized route or a combination of both).

For push, replace, back, and forward, you can pass another parameter opts:

• scroll scrolls the window to the top of the page after navigation. (Possible values is "auto", "smooth" or just undefined, defaults to "auto".)

createRouterTree

Builds the router tree from an array of Routes. This is used by <Router> to match pages and also to preload component chunks (if lazy was used). Must be called outside of the component and is recommended to be called only once.

SSR

For SSR, you can simply pass a pathname and a search strings to a location object to <Router>

<Router
  location={{
    pathname,
    search,
  }}
/>

License

MIT © lxsmnsyc