https://github.com/4catalyzer/found-named-routes

Named routes support for found
https://github.com/4catalyzer/found-named-routes

Last synced: about 1 month ago
JSON representation

Named routes support for found

• Host: GitHub
• URL: https://github.com/4catalyzer/found-named-routes
• Owner: 4Catalyzer
• License: mit
• Created: 2016-12-07T21:52:30.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-10-10T16:04:28.000Z (2 months ago)
• Last Synced: 2024-10-12T20:37:15.854Z (2 months ago)
• Language: JavaScript
• Size: 581 KB
• Stars: 5
• Watchers: 6
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Found Named Routes

Named route support for [Found](https://github.com/4Catalyzer/found). Inspired by [use-named-routes](https://github.com/taion/use-named-routes).

## Usage

Pass your route configuration into `createNamedRoutesMiddleware`, then pass the middleware into `historyMiddlewares` when creating your router.

```js

import { createBrowserRouter, makeRouteConfig, Route } from 'found';

import { createNamedRoutesMiddleware } from 'found-named-routes';

const routeConfig = makeRouteConfig(

  

    

      

    

  ,

);

const namedRoutesMiddleware = createNamedRoutesMiddleware(routeConfig);

const BrowserRouter = createBrowserRouter({

  routeConfig,

  // Include queryMiddleware to preserve the default middlewares.

  historyMiddlewares: [namedRoutesMiddleware, queryMiddleware],

});

```

Note that `createNamedRoutesMiddleware` expects an object route configuration; when using JSX routes, make sure you pass in the output of `makeRouteConfig`.

You can then use either route names or objects with name and optionally params:

```js

router.push('widgets');

router.push({ name: 'widget', params: { widgetId: '1' } });

```

or using links:

```js

To widgets

To widget 1

```

This middleware will not treat location strings as route names when the location starts with `/` or when the location string contains `://`, as it assumes that the former are absolute paths and that the latter are absolute URLs.

```js

history.push('/widgets/1');

To widget 1;

```