Named route support for Found

Usage no npm install needed!

<script type="module">
  import foundNamedRoutes from '';


Found Named Routes

Named route support for Found. Inspired by use-named-routes.


Pass your route configuration into createNamedRoutesMiddleware, then pass the middleware into historyMiddlewares when creating your router.

import { createBrowserRouter, makeRouteConfig, Route } from 'found';
import { createNamedRoutesMiddleware } from 'found-named-routes';

const routeConfig = makeRouteConfig(
  <Route path="/">
    <Route name="widgets" path="widgets" component={WidgetsPage}>
      <Route name="widget" path=":widgetId" component={WidgetPage} />

const namedRoutesMiddleware = createNamedRoutesMiddleware(routeConfig);

const BrowserRouter = createBrowserRouter({
  // Include queryMiddleware to preserve the default middlewares.
  historyMiddlewares: [namedRoutesMiddleware, queryMiddleware],

Note that createNamedRoutesMiddleware expects an object route configuration; when using JSX routes, make sure you pass in the output of makeRouteConfig.

You can then use either route names or objects with name and optionally params:

router.push({ name: 'widget', params: { widgetId: '1' } });

or using links:

<Link to="widgets">To widgets</Link>
<Link to={{ name: 'widget', params: { widgetId: '1' } }}>To widget 1</Link>

This middleware will not treat location strings as route names when the location starts with / or when the location string contains ://, as it assumes that the former are absolute paths and that the latter are absolute URLs.


<Link to="/widgets/1">To widget 1</Link>;