router-preact

📡 Router | Preact

A tiny router for Preact apps. It connects your app with the address bar. That's it.

Features

• Tiny footprint (less than 1KB gzipped!)
• No dependencies (BYO Preact/HTM)
• Comprehensive test suite (100% code coverage)
• Suitable for production use
• MIT license
• Browser-native ESM friendly (designed specifically to require zero build tools to run)

Installing

npm install --save router-preact

Yarn users, you know what to do instead.

Usage

The following examples are written in JSX format, for brevity.

Example: Basic Usage

import { Link, Route } from 'router-preact';

const App = () => <>
  <Route path="/">
    <Link to="/next">Next page</Link>
  </Route>

  <Route path="/next">
    <Link to="/">First page</Link>
  </Route>
</>;

Example: Parameterized Routes

import { Link, Route, pattern } from 'router-preact';

const App = () => <>
  <Route path="/">
    <Link to="/pages/1">Go to page 1</Link>
  </Route>

  <Route path={pattern`/pages/${'pageNumber'}`} render={({ params: { pageNumber } }) => <>
    <p>Thank you for visiting page {pageNumber}.</p>
    <Link to={`/pages/${pageNumber + 1}`}>Go to next page</Link>
  </>}/>
</>;

Example: Redirection

import { Redirect, Route } from 'router-preact';

const App = () => <>
  <Route path="/">
    <Redirect to="/pages/1"/>
  </Route>
</>;

Advanced Example: Intercepting the Router

If you really want to, you can swap out the router implementation by using the Router context provided by this package. For example, if you want to test a component that involves routing.

import { Router } from 'router-preact';

const myRouter = {
  match(path) {
    // If the given path matches the currently active route, then return an object with key-value pairs for each path parameter
    // Otherwise, return `undefined`
  },
  navigate(path) {
    // Transition the currently active route to the given path and notify any callbacks registered via onNavigate() of the new path
  },
  onNavigate: (callback) => () => {
    // Register the callback so that it gets notified when the active route changes
    // Return a function that, when called, will deregister the callback
  },
  path() {
    // Return the path of the currently active route
  },
  query() {
    // Return the query parameters of the currently active route as an object
  }
};

const App = () => <Router.Provider value={myRouter}>
  ...
</>;