Router

@farbenmeer/router is a minimal client-side React router. It covers the most common routing needs without any magic — just components, hooks, and TypeScript.

Installation

npm install @farbenmeer/router

Features

Declarative Routing

Define routes as React components. No config files, no filesystem conventions.

Nested Routes

Compose routes hierarchically with automatic parameter inheritance from parent segments.

Path Parameters

Dynamic segments with colon syntax (:id), plus wildcard routes (* and *name).

Immutable Search Params

Update URL search parameters without mutation — each .set() returns a new params object.

Testing-Friendly

Inject a custom location and history into <Router> for fully deterministic tests.

Tiny

No dependencies beyond React. No runtime overhead from a complex matching engine.

Quick Start

import { Router, Route, Link } from "@farbenmeer/router";

function App() {
  return (
    <Router>
      <nav>
        <Link href="/">Home</Link>
        <Link href="/users">Users</Link>
      </nav>

      <Route path="/">
        <HomePage />
      </Route>

      <Route path="/users">
        <UsersLayout />
        <Route exact>
          <UsersList />
        </Route>
        <Route path=":id">
          <UserProfile />
        </Route>
      </Route>
    </Router>
  );
}

Hooks

Hook	Description
useRouter()	Programmatic navigation via .push() and .replace()
usePathname()	Current pathname string
useParams()	Dynamic route parameters from the current segment
useSearchParams()	Immutable search parameter access and updates
useHash()	Current URL hash fragment

Reference

Router Root provider component.

Route Conditional render by path.

Link Client-side navigation anchor.