@booli/named-routes
v1.1.2
Published
Register and work with route functions instead of hardcoded strings. Translates a url string with placeholder params to a path with injected params.
Downloads
8
Keywords
Readme
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/"]
// ]