Found Named Routes

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

Usage

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} />
    </Route>
  </Route>,
);

const namedRoutesMiddleware = createNamedRoutesMiddleware(routeConfig);

const BrowserRouter = createBrowserRouter({
  routeConfig,
  // 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('widgets');
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.

history.push('/widgets/1');

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