Signature

function createRouter(
  routes: readonly NavigationRoute[],
  options: NavigationRouterOptions = {},
): NavigationRouter;

Parameters

routes contains URL patterns and components. Data handlers and shouldRevalidate are excluded by the NavigationRoute type. options accepts url and browser; browser defaults to false.

Usage

Use the same components and location/parameter hooks with either router. Create the instance outside component rendering.

import { render } from "preact";
import {
  createRouter,
  defineRoute,
  Link,
  RouterProvider,
  Routes,
} from "@kasperrt/smolter/preact";
import Home from "./routes/home";
import About from "./routes/about";

const router = createRouter([
  defineRoute("/", { default: Home }),
  defineRoute("/about", { default: About }),
], { browser: true });

render(
  <RouterProvider router={router}>
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
    <Routes />
  </RouterProvider>,
  document.getElementById("app")!,
);

Returns

A NavigationRouter with routes, getSnapshot, subscribe, start, navigate and dispose. It has no submit, createFetcher or revalidate methods. Initial route matching is synchronous, including during SSR.

History and lifecycle

browser: true enables pushState/replaceState navigation and listens for popstate and hashchange while a provider is mounted. An unmatched URL renders the Routes fallback. External imperative destinations are ignored; external links retain browser behavior. dispose releases subscriptions and history listeners.

Add data flow

Choose createDataRouter for loaders, actions, fetchers, cancellation, revalidation and data hydration. Application/file-router hydration helpers already use createDataRouter. Navigation-only routing does not execute handlers or manage scroll/view-transition integrations.

const router = createDataRouter(routes, { browser: true });