Define your SPA routes in a single source of truth - use them everywhere.
Routz is available on NPM:
npm install routz --save
or
yarn add routz
The routz package exposes a single define
function that defines the application routes by the given parameter and returns helper functions to access these routes. A definition of application routes is an object with key/value pairs. Each key is the name of a route. It's meant to be used in your application later on. The value describes the path definition. Each path can contain params. Params are dynamic parts of a single path, that are defined in the format: [param]
. Optional params are defined by a question mark at the end like: [optionalParam?]
.
// urls.js
import { define } from 'routz';
const { receive, resolve } = define({
'index': '/[locale?]',
'blog:list': '/[locale?]/blog',
'blog:article': '/[locale?]/blog/[slug]',
});
export { receive, resolve };
In this example the locale
param is optional. The slug
param in the route blog:article
is required.
The exposed functions can be used inside the application. For example in a react component (using Next.js):
// list.jsx
import Link from 'next/link';
import React from 'react';
import { resolve } from 'app/urls';
export const List = ({ articles }) => (
<ul>
{articles.map(({ slug, title }) => (
<li key={slug}>
<Link href={resolve('blog:article', { slug })}>
<a>{title}</a>
</Link>
</li>
))}
</ul>
);
Defines the routes and returns scoped resolve
and receive
functions that access the given routes.
This builds a path for a route by name and params. Params are dynamic parts of a single path, that are defined in the format: [param]
. Optional params are defined by a question mark at the end like: [optionalParam?]
. The params need to be passed as a key/value object. Optional params are not required to be defined in this object, but missing params will throw an error.
Returns the route defintion by a given name.