@booli/named-routes

Named Routes

Helper to handle routes in your project.

Required polyfills

None

Motivation

Instead of using hardcoded strings as URLs in your code base you can use NamedRoutes. This will give you both centralized way to define routes and a simple way to interpolate params into the URL.

A few benefits are:

• If you ever need to change a path it's a simple matter of changing it in the definition and all paths throughout the project will be updated.
• You can easily get an overview of all available routes in your project (using export())
• You don't need to do string interpolation when you create links, the lib will handle all the magic

Usage

Register and use paths:

import NamedRoutes from '@booli/named-routes'

const namedRoutes = new NamedRoutes()
const routes = namedRoutes.register({
  users_path: '/users/',
  user_path: '/users/:id/',
})

routes.users_path()  // => '/users/'
routes.user_path(20) // => '/users/20/'

A common use case is to define the routes in a module which exports the routes, then they can easily be imported and used throughout the project.

// routes.js
const namedRoutes = new NamedRoutes()
const Routes = namedRoutes.register({
  users_path: '/users/',
  user_path: '/users/:id/',
})

export default Routes

import Routes from '../routes'

// Use in the router
<Switch>
  <Route path={Routes.user_path()} ... />
  <Route path={Routes.users_path()} ... />
</Switch>

// Use when creating links
<Link to={Routes.users_path()}>Users</Link>
<Link to={Routes.user_path(42)}>User 42</Link>

Route translation details

Paths including params (eg. user/:id/) will be translated from left to right. Any params that have not been translated will remain in the output, and any extra arguments passed to the function will be ignored.

const routes = namedRoutes.register({
  user_path: '/:one/:two/'
})

user_path()        // => /:one/:two/
user_path(1)       // => /1/:two/
user_path(1, 2)    // => /1/2/
user_path(1, 2, 3) // => /1/2/

This is also useful when used in react-router, since the router uses the colon pattern for path parameters.

Export available routes

Sometimes it's useful to see which routes are available. Calling the export function will give you a list of pairs including all route names with the corresponding raw path.

import NamedRoutes from '@booli/named-routes'

const namedRoutes = new NamedRoutes()
const routes = namedRoutes.register({
  users_path: '/users/',
  user_path: '/users/:id/',
})

namedRoutes.export() // => 
  // [
  //   ["users_path", "/users/"], 
  //   ["user_path", "/users/:id/"]
  // ]