https://github.com/emilte/named-routes

npmjs package for improved named routes.
https://github.com/emilte/named-routes

npm npm-module npm-package npmjs react react-router react-router-dom reactjs router routing

Last synced: about 1 month ago
JSON representation

npmjs package for improved named routes.

• Host: GitHub
• URL: https://github.com/emilte/named-routes
• Owner: emilte
• Created: 2022-09-21T19:40:12.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-23T15:42:05.000Z (over 2 years ago)
• Last Synced: 2024-10-18T19:03:46.701Z (2 months ago)
• Topics: npm, npm-module, npm-package, npmjs, react, react-router, react-router-dom, reactjs, router, routing
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@emilte/named-routes
• Size: 5.86 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# named-routes

Inspired by named-urls ([npmjs](https://www.npmjs.com/package/named-urls), [github](https://github.com/kennedykori/named-urls/))

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:

```ts

// "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.

     })

   })

}

```

Final result

```ts

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):

```ts

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):

```tsx

// "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 (

        

            

            

             {/* Catch everything else */}

        

    )

}

```

Example 3 (link):

```tsx

// "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 Go to Qux 1

}

```