https://github.com/saltas888/react-router-query-middleware

It adds query object into router reducer when using react-router with connected-react-router
https://github.com/saltas888/react-router-query-middleware

connected-react-router react-router react-router-query react-router-v4 react-router4

Last synced: about 1 month ago
JSON representation

It adds query object into router reducer when using react-router with connected-react-router

• Host: GitHub
• URL: https://github.com/saltas888/react-router-query-middleware
• Owner: saltas888
• License: mit
• Created: 2018-03-22T12:52:11.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T02:50:14.000Z (almost 2 years ago)
• Last Synced: 2024-09-29T00:21:24.223Z (about 2 months ago)
• Topics: connected-react-router, react-router, react-router-query, react-router-v4, react-router4
• Language: JavaScript
• Homepage:
• Size: 1.17 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-router-query-middleware

[![Download Count](http://img.shields.io/npm/dm/react-router-query-middleware.svg?style=flat-square)](https://npmjs.org/package/react-router-query-middleware)

[![npm version](https://badge.fury.io/js/react-router-query-middleware.svg)](https://badge.fury.io/js/react-router-query-middleware)

:white_check_mark: A solution for ***[this](https://github.com/ReactTraining/react-router/issues/4410)***

:palm_tree: It adds query object into router reducer when using:

[React Router v4](https://github.com/ReactTraining/react-router)

:heavy_plus_sign: [connected-react-router](https://github.com/supasate/connected-react-router)

### Installation

```sh

$ npm install --save react-router-query-middleware

```

### Simple usage

Add the middleware *after the routerMiddleware* provided from connected-react-router

```js

...

import { routerMiddleware } from 'connected-react-router';

import queryMiddleware from 'react-router-query-middleware';

...

  const middlewares = [

    ...

    thunk, 

    routerMiddleware(history),

    queryMiddleware(),

    ...

    // Add other middlewares here

  ];

  

applyMiddleware(...middlewares);

...

```

* If you use deprecated [react-router-redux](https://github.com/reactjs/react-router-redux) then install v2.0.2

### Advanced usage

You can configure *the action name that triggers location change* or *the path of location object in triggered action*

```js

...

queryMiddleware({

  actionName: '@@router/LOCATION_CHANGE',

  actionLocationPath: 'payload.location'

});

...

```

### Options

| opt | default | type | description |

| ---- | ---- | ----| ---- |

| actionName | @@router/LOCATION_CHANGE | string | Action name that triggers location change |

| actionLocationPath | payload.location | string | Path of location object in triggered action |

License

----

MIT