# @mpen/rerouter

> Lightweight type-safe router for React with URL helper generation.

Latest version **0.4.9** (published 2026-09-07) · 0 weekly downloads

## Install

```sh
npm install @mpen/rerouter
pnpm add @mpen/rerouter
yarn add @mpen/rerouter
bun add @mpen/rerouter
```

Provides the command `rerouter`.

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.9 |
| Published | 2026-09-07 |
| First published | 2023-09-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mnpenner |

## Links

- npm: https://www.npmjs.com/package/@mpen/rerouter
- npm.io page: https://npm.io/package/@mpen/rerouter

## Recent versions

- 0.4.9 (latest) — 2026-09-07
- 0.4.8 — 2026-07-19
- 0.4.7 — 2026-07-13
- 0.4.6 — 2026-06-20
- 0.4.5 — 2026-06-17
- 0.4.4 — 2026-06-17
- 0.4.3 — 2026-06-17
- 0.4.2 — 2026-05-31
- 0.4.1 — 2026-05-30
- 0.4.0 — 2026-05-17
- 0.3.3 — 2026-05-09
- 0.3.2 — 2026-05-09
- 0.3.1 — 2026-05-09
- 0.3.0 — 2026-05-06
- 0.1.9 — 2023-09-17
- … 5 more at https://npm.io/package/@mpen/rerouter/versions

## README

# @mpen/rerouter

A lightweight, type-safe router for React with a CLI for generating URL helpers.

## Features

- **Small footprint**: Focuses only on the essentials of routing.
- **Type-safe URL generation**: CLI tool imports your route file and generates helper functions, ensuring you never have broken links.
- **Support for `path-to-regexp`**: Familiar syntax for route patterns.
- **Native `URLPattern` support**: Can use the browser's native `URLPattern` API.
- **Hooks-based**: Easy access to current path and search parameters.

## Installation

```bash
bun add @mpen/rerouter
```

## CLI: `rerouter`

The package includes a CLI tool to generate type-safe route helpers from your route definitions.

### Usage

1. Define your routes in a dedicated `.ts` file:

```ts
// routes.ts
export default [
    { name: 'home', path: '/', component: () => import('./pages/Home') },
    { name: 'userProfile', path: '/user/:id', component: () => import('./pages/UserProfile') },
    { path: '/user/:id/settings', component: () => import('./pages/UserProfile') },
]
```

Keep this file side-effect-free. The CLI imports and evaluates the route file to extract route names and paths, so avoid top-level browser access, data fetching, app bootstrapping, or eager page component imports. Put route components behind `() => import('./pages/...')` loaders so generation does not pull page modules into the CLI process.

The `name` field is optional. Named string-path routes are included in generated URL helpers; unnamed routes still match at runtime but are skipped by the generator.

2. Run the generator:

```bash
bunx @mpen/rerouter routes.ts -o src/routes.gen.ts
```

3. Use the generated helpers:

```tsx
import { userProfile } from './routes.gen'

// Returns "/user/123"
const url = userProfile({ id: 123 })
```

## Library Usage

### Router

```tsx
import { Router } from '@mpen/rerouter'
import ROUTES from './routes'

function App() {
    return <Router routes={ROUTES} loading={<div>Loading...</div>} />
}
```

`loading` is delayed by 300ms by default to avoid flashing fallback UI during quick route
loads. Pass `loadingDelayMs={0}` to show it immediately, or another millisecond value to tune
the delay.

### Link

```tsx
import { Link } from '@mpen/rerouter'
import { userProfile } from './routes.gen'

function Navigation() {
    return <Link href={userProfile({ id: 'me' })}>My Profile</Link>
}
```

### Hooks

```tsx
import { useUrlPath, useUrlSearchParams } from '@mpen/rerouter'

function MyComponent() {
    const path = useUrlPath()
    const searchParams = useUrlSearchParams()
    // ...
}
```

---
_Source: https://npm.io/package/@mpen/rerouter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._