react-router-named-routes

This package provides support for named routes for React-Router 1, 2, 3, 4, and 5.

The support for named routes was once part of a core, but got removed at some point:

remix-run/react-router#1840 (comment)

Installation

npm install react-router-named-routes

React-router 4.0+

React-router v4 changed the game and we no longer have a single config file with all <Route/> components inside. Because of that we cannot map all routing patterns to resolve them based on their name. You will have to express all your routes using constants, like this:

routes.js:

export const USER_SHOW = '/user/:id'

and then import it whenever you need to use named routes:

import { USER_SHOW } from 'routes';
import { formatRoute } from 'react-router-named-routes';
<Route path={USER_SHOW} />
<Link to={formatRoute(USER_SHOW, {id: 1})} />
<Link to={{ pathname: formatRoute(USER_SHOW, {id: 1}) }} />

Additional benefit of this approach is that you get all the juice of static analysis if you use tools like flow or typescript.

(thanks to @Sawtaytoes for an idea)

React-router 3.0

Use <Link /> component provided by this package instead of the one provided by react-router. This requires some refactoring but not that much:

1. Define all your routes in a single module. You probably do it like this anyway.
2. Use this package before you render() anything:

var routes = require("myproject/routes");
var {Link, NamedURLResolver} = require("react-router-named-routes");
NamedURLResolver.mergeRouteTree(routes, "/");

<Route name="todo.edit" path="todo/:id/edit" component={TodoEditForm} />
<Link to="todo.edit" params={{id: 123}}>Edit</Link>
<Link to={{name: "todo.edit", search: "?param=1"}} params={{id: 123}}>Edit</Link>

React-router 2.0 and older

1. Define all your routes in a single module. You probably do it like this anyway.
2. Use this package before you render() anything:

var routes = require("myproject/routes");
var {FixNamedRoutesSupport} = require("react-router-named-routes");
FixNamedRoutesSupport(routes);

That's it, with three lines of code you saved yourself hours of refactoring! You may now use react-router just like in react-router 0.13:

<Route name="todo.edit" path="todo/:id/edit" component={TodoEditForm} />

<Link to="todo.edit" params={{id: 123}}>Edit</Link>

Caveats

This probably breaks the shiny new async routes feature introduced in ReactRouter 1.0.0. If you come straight from 0.13 you don't use it anyway.

Contributing

A pull request or an issue report is always welcome. If this package saved you some time, starring this repo is a nice way to say "thank you".

Advanced stuff and implementation details

Named Routes are resolved by a simple class called NamedURLResolverClass.

If you want some custom logic involved in resolving your named routes, or routes in general, you may extend the class NamedURLResolverClass from this package and replace the global resolver like this:

var {NamedURLResolverClass, setNamedURLResolver} = require("react-router-named-routes");
class CustomURLResolver extends NamedURLResolverClass {
  resolve(name, params) {
    // ...do some fancy stuff
  }
}
setNamedURLResolver(new CustomURLResolver());

Also, a <Link /> component will accept a resolver property if you don't want to use a default one for any reason:

<Link resolver={new CustomURLResolver()} />

License

New BSD and MIT.