[![CircleCI][Badge-CI]][CI]
[![Code Coverage][Badge-Coverage]][Coverage]
[![PRs Welcome][Badge-PRWelcome]][PRWelcome]
[![MIT License][Badge-License]][LICENSE]

[![Watch on GitHub][Badge-Watch]][Watch]
[![Star on GitHub][Badge-Stars]][Star]
[![Tweet][Badge-Twitter]][Twitter]

> Implementing a static route config and named routes on top of (react-router) at this point is like a 20 line ordeal.
– Ryan Florence

Motivation

Named routes are essential to keep route config DRY and prevent silly errors
due to typos. This feature was removed from react-router in 1.0 and I missed
it since then as many
others.

There're other libs dealing with named routes, some of them provide custom
Link, Route routes, some of them have more features to integrate with
express. Here's incomplete list of libs I considered before writing these
20 lines of code (and 200+ lines of other files to publish this package):

- https://github.com/adamziel/react-router-named-routes
- https://github.com/taion/use-named-routes
- https://github.com/alubbe/named-routes

> NOTE: v2 introduces breaking changes. Please check out the migration guide before upgrading.

Installation

``
$ npm install named-urls
`

or


`
$ yarn add named-urls
`

Quickstart

Create file with all routes in your application (e.g. routes.js). Use
named-urls/include to create namespaced group of routes with common prefix:

`jsx
// routes.js
import { include } from 'named-urls'

export default {
// simple route
profile: '/profile',

// route with params
article: '/article/:articleId',

// route with optional params
messages: '/messages/:messageId?',

// Routes with common path prefix
auth: include('/auth', {
// Absolute url (ignore /auth prefix)
login: '/login/',

// Relative urls (prefixed with /auth)
passwordReset: 'password/reset/',
passwordVerify: 'password/verify/',
}),

// Routes with params
messages: include('/messages', {
all: '',
unread: 'unread/',

// nesting of includes is allowed
detail: include(':messageId/', {
show: '',
edit: 'edit/',
comments: 'comments/',
})
})
}
`

Use routes in Route component from react-router-dom:

`jsx
// App.js

import React from 'react'
import { Switch, Route } from 'react-router-dom'

import routes from './routes'
import * as scenes from './scenes' // just a convention, could be "pages"

function App() {
return (



// ...



)
}
`

Routes with parameters can be formatted using reverse function:

`jsx
// Navigation.js
import React from 'react'
import { Link } from 'react-router'
import { reverse } from 'named-urls'

function Navigation({ messages }) {
return (


• ${routes.profile}}>Profile

// ...
// Use reverse to replace params in route pattern with values
{messages.map(message =>

• 
  ${routes.messages.detail.show}, { messageId: message.id })}>
Profile



)}