Skip to content
Tiny redux bindings for react-router
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.codeclimate.yml
.editorconfig
.eslintrc
.flowconfig
.gitignore
.travis.yml
LICENSE.md
README.md
index.d.ts
jest.config.js
package-lock.json
package.json
rollup.config.js

README.md

simple-react-router-redux

NPM version build status Maintainability Test Coverage

Redux bindings for react-router v4. 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

You can’t perform that action at this time.