# redux-regexp-router

> RegExp based router

Latest version **0.4.1** (published 2019-06-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-regexp-router
pnpm add redux-regexp-router
yarn add redux-regexp-router
bun add redux-regexp-router
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2019-06-20 |
| First published | 2017-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 102.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Stas Degtyarev |
| Maintainers | sidchik |

## Links

- npm: https://www.npmjs.com/package/redux-regexp-router
- Repository: https://github.com/SiDChik/redux-regexp-router
- Homepage: https://github.com/SiDChik/redux-regexp-router#readme
- Issues: https://github.com/SiDChik/redux-regexp-router/issues
- npm.io page: https://npm.io/package/redux-regexp-router

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [history](https://npm.io/package/history.md) ^4.9.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Recent versions

- 0.4.1 (latest) — 2019-06-20
- 0.4.0 — 2019-06-20
- 0.3.0 — 2017-08-21
- 0.2.2 — 2017-04-24
- 0.2.1 — 2017-03-31
- 0.2.0 — 2017-03-31
- 0.1.10 — 2017-03-29
- 0.1.9 — 2017-03-29
- 0.1.8 — 2017-03-29
- 0.1.7 — 2017-03-29
- 0.1.6 — 2017-03-29
- 0.1.5 — 2017-03-29
- 0.1.4 — 2017-03-29
- 0.1.3 — 2017-03-29
- 0.1.2 — 2017-03-29
- … 4 more at https://npm.io/package/redux-regexp-router/versions

## README

Redux Regexp Router
[![npm version](https://img.shields.io/npm/v/redux-regexp-router.svg?style=flat-square)](https://www.npmjs.com/package/redux-regexp-router) [![npm downloads](https://img.shields.io/npm/dm/redux-regexp-router.svg?style=flat-square)](https://www.npmjs.com/package/redux-regexp-router)
=========================

Declarative routing for [React Redux](https://github.com/reactjs/react-redux) 
using RegExps as patterns.
* Nested routing
* Relative links
* Regexp patterns


## Installation

```
npm install --save redux-regexp-router
```

## How to use
1. Add routeReducers to your Store
2. Wrap your app to History component
3. Use Route's

```js
import ReactDom from 'react-dom';
import { combineReducers, createStore } from 'redux';

import { routeReducers, createHistory, HashHistory } from 'redux-regexp-router';

let store = createStore(combineReducers({ ...routeReducers, yourAppReducers }));
ReactDom.render(
    <Provider store={store}>
        <HashHistory>
            <div>
                <ul>
                    <li><Link to="/link1">To Link1</Link></li>
                    <li><Link to="/link2">To Link2</Link></li>
                    <li><Link to="/link3">To Link3</Link></li>
                </ul>
                
                <h4>Result</h4>
                <Route path="^link1">
                    <div>Link1</div>
                </Route>
                <Route path="^link2">
                    <div>Link2</div>
                </Route>
                <Route path="^link3">
                    <div>Link2</div>
                </Route>
            </div>
        </HashHistory>
    </Provider>
    , document.getElementById('app'));

```

### Nested Routes
Just put one Route to another.
```js
...
    <ul>
        <li><Link to="/link1">To Link1</Link></li>
        <li><Link to="/link1/1">To Link1 / 1</Link></li>
        <li><Link to="/link2">To Link2</Link></li>
    </ul>
    
    <h4>Result</h4>
    <Route path="^link1">
        <div>Link1</div>
        <Route path="^1">
            <div>SubRoute</div>
        </Route>
    </Route>
    <Route path="^link2">
        <div>Link2</div>
    </Route>
...
```

### Switch routing
You can place many routes in one section. First matched route will display.
```js
...
    <Switch>
        <Route path="^path123/"><span>path123</span></Route>
        <Route path="^path12/"><span>path12</span></Route>
        <Route path="^path1/"><span>path12</span></Route>
        <Route><span>not found</span></Route>
    </Switch>
...
````

### Relative links
You can pass relative link to Link component. This link have an adress based on Route location.
```js
...
    <Route path="^about/">
        <Link to="company">Company</Link>
    </Route>
...
```
Link will have an address: /about/company. To absolute link just add / at first.

### Patterns / Path
Path matching based on RegExp. Also you can set kwargs for your routes.
```js
    <Route path="^products/(id=\d+)/$" component={<Product/>}/>
    <Route path="^products/(slug=\w+)/$" component={<Product/>}/>
    <Route path="^products/(category=\w+)/(id=\d+)/$" component={<Product/>}/>
```
* ^products/(id=\d+)/$ - `id` kwarg with digits
* ^products/(slug=\w+)/$ - `slug` kwarg with [0-9a-z_]
* ^products/(category=\w+)/(id=\d+)/$ - creates `category` and `id` kwargs

### Access to Kwargs
#### By Props 
Child component of Route will have this.props.kwargs
#### By Store 
Connect your component to reducer `routeKwargs`. RouteKwargs contain kwargs by Routes. Key is a concatenate of nested routes path or name .
```js
<Route path="^link1/(id=\d+)" name="link1">
    <div>Link1</div>
    <Route path="^(id=\d+)" name="sublink">
        <div>SubRoute</div>
    </Route>
</Route>
```
routeKwargs state by url /link1/1/2/:
```json
{
  "link1": {
    "id": "1"
  },
  "link1/sublink": {
    "id": "2"
  }
}
```
#### By Context
Use helper addRoutingContext to add Context. After this you can get kwargs based on current 
route of your component. To get kwargs use: this.context.getRouteKwargs() 

### Absolute Routes
If you need, you can create Route ignoring parent location, just add absolute prop.
url: /test/nested/test
```js
    <Route path="^test/">
        <Route path="^nested">Will show</Route>
        <Route path="^test/nes" absolute>Will Show too, becouse absolute</Route>
    </Route>
```

---
_Source: https://npm.io/package/redux-regexp-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._