named-react-router-dom v1.0.1

Named React Router

Use named routes with react-router v4

Install

npm install --save react-router-dom named-react-router-dom

React Native: not available. PRs are welcome

API

NamedRoute

import { NamedRoute } from 'named-react-router-dom';

// Becomes /home
<NamedRoute name="home" component={Component} />

// Becomes /dashboard/home
<NamedRoute name="dashboard.home" component={Component} />

// Becomes /dashboard/overview
<NamedRoute name="dashboard.home" path="overview" component={Component} />

// Becomes /overview
<NamedRoute name="dashboard.home" path="overview" component={Component} noNamespacePath />

You can also add any other Route properties from react-router-dom

NamedLink

import { NamedLink } from 'named-react-router-dom';

// Will redirect to dashboard.home, even if you use path="" on the <NamedRoute ... />
<NamedLink name="dashboard.home" />;

// Instead of <Link />, it will output a <NavLink />
<NamedLink name="dashboard.home" navLink />;

Aside from name and navLink, any other properties will be spread, so you can use them if you need.

react-router-dom Link API

react-router-dom NavLink API

NamedRedirect

import { NamedRedirect } from 'named-react-router-dom';

<NamedRedirect name="dashboard.home" from="/" />;
<NamedRedirect name="notFound" />;

Aside from name, any properties are spread to <Redirect />.

react-router-dom Redirect API

NamedSwitch

The Switch that comes in react-router won't work out of the box, as it expects it's children to be either Route or Redirect.

To fix that, use <NamedSwitch />, which renders all children before passing them to <Switch />. This is achieved through the static method render on NamedRoute and NamedRedirect.

If you want to create your own NamedComponent, please take a look at the NamedRoute implementation.

import { NamedRedirect, NamedRoute, NamedSwitch } from 'named-react-router-dom';

<NamedSwitch>
  <NamedRoute name="home" />
  <NamedRoute name="settings" />
  <NamedRedirect name="home" from="/" />;
  <NamedRedirect name="notFound" />;
</NamedSwitch>;

Route (not a React Component)

In some cases you may need to register and get links to routes outside of React. You can do so by using the Route api dirctly.

import { Route } from 'named-react-router-dom';

// Add named route to index
new Route('name', options: Options);

// Get link
Route.get(name: string, params?: Object, search?: string, hash?: string);

Just like <NamedRoute />, the Options when creating a new Route are all the other Route properties from react-router-dom, including path.

Flow support

All packages are built with flow and provide flow support from the get go. Flow will automatically include typings when you import named-react-router-dom.

To use the flow typings shipped:

• In .flowconfig, you cannot ignore node_modules.
• In .flowconfig, you cannot import it explicitly in the [libs] section.
• You do not need to install library definition using flow-typed.

Resources

• Contributing Guide
• Code of Conduct