@emilte/named-routes v1.0.1

named-routes

Inspired by named-urls (npmjs, github)

As I am unsure of how forking works, this package is a direct copy of the package above. I have extended the functionality with a few additions: 1. Removed toString() method. 3. Added base: Raw path given to include(), not affected by nesting. 4. Added star: Raw base as route representation to catch all patterns. base suffixed with /*. 5. Added self: Full path to base.

Example setup:

// "src/routes.ts"
import { include } from '@emilte/named-routes';

export const ROUTES = {
   foo: include('/foo/', {
        bar: 'bar/',
        scope: include('scope/:param', { // <- Note optional trailing slash.
            baz: 'baz', // <- Note optional trailing slash.
            qux: 'qux/',
            nos: '/nos/' // <- Note absolute path.
     })
   })
}

ROUTES = {
    foo: {
        base: '/foo/',
        star: '/foo/*',
        self: '/foo/',
        bar: '/foo/bar/',
        scope: {
            base: 'scope/:param',
            star: 'scope/:param/*',
            self: '/foo/scope/:param',
            baz: '/foo/scope/:param/baz',
            qux: '/foo/scope/:param/qux/',
            nos: '/nos/'
        }
    }
}

Usage:

Example 1 (simple):

ROUTES.foo.base === '/foo/'
ROUTES.foo.self === '/foo/'
ROUTES.foo.star === '/foo/*'

ROUTES.foo.scope.base === 'scope/:param'
ROUTES.foo.scope.star === 'scope/:param/*'
ROUTES.foo.scope.self === '/foo/scope/:param'

ROUTES.foo.scope.baz === '/foo/scope/:param/baz'

ROUTES.foo.scope.qux === '/foo/scope/:param/qux/'

ROUTES.foo.scope.nos === '/nos/'

// Use `reverse` to inject params.
reverse(ROUTES.foo.scope.baz, {param:'hello-world'}) === '/foo/scope/hello-world/baz'

Example 2 (router):

// "src/AppRoutes.tsx"
import { Route, Routes } from 'react-router-dom';
import { BazPage, QuxPage } from 'Pages'; // Some example components.
import { ROUTES } from 'routes'; // From example setup.
import { FooRoutes } from 'src'; // Some other nested routing.

export function AppRoutes() {
    return (
        <Routes>
            <Route path={ROUTES.foo.scope.baz} element={BazPage} />
            <Route path={ROUTES.foo.scope.qux} element={QuxPage} />
            <Route path={ROUTES.foo.star} element={FooRoutes} /> {/* Catch everything else */}
        </Routes>
    )
}

Example 3 (link):

// "src/Pages/BazPage.tsx"
import { reverse } from '@emilte/named-routes';
import { ROUTES } from 'routes'; // From example setup.

export function BazPage() {
    const quxOneUrl = reverse(ROUTES.foo.scope.qux, {param: 1})
    return <a href={quxOneUrl}>Go to Qux 1</a>
}