simple-react-router-redux

Redux bindings for react-router. A tiny fork of connected-react-router

Setup

npm install simple-react-router-redux

Usage

Setup your own history module:

import { createBrowserHistory } from 'history';
 
export default createBrowserHistory();

And configure the store:

import { applyMiddleware, createStore, compose, combineReducers } from 'redux';
import { connectRouter, routerMiddleware } from 'simple-react-router-redux';
 
import rootReducer from './reducers';
import history from './history';
 
// Combine your reducers with connectRouter.
const reducers = combineReducers({
  ...rootReducer,
  router: connectRouter(history),
});
 
const store = createStore(
  reducers, // root reducer with router state
  initialState,
  compose(
    applyMiddleware(
      routerMiddleware(history), // for dispatching history actions
      // ... other middlewares ...
    ),
  ),
);

Now just wrap your routes with ConnectedRouter with the same history module

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router';
import { ConnectedRouter } from 'simple-react-router-redux';
 
import history from './history';
import store from './store';
 
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Switch>
          <Route exact path="/" render={() => <div>Match</div>} />
          <Route render={() => <div>Miss</div>} />
        </Switch>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react'),
);

Enjoy!

License

MIT License