react-router-query-middleware

✅ A solution for this

🌴 It adds query object into router reducer when using: React Router v4 ➕ connected-react-router

Installation

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

Simple usage

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

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

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