https://github.com/gilbarbara/simple-react-router-redux

Tiny redux bindings for react-router
https://github.com/gilbarbara/simple-react-router-redux

react react-router redux

Last synced: 2 months ago
JSON representation

Tiny redux bindings for react-router

• Host: GitHub
• URL: https://github.com/gilbarbara/simple-react-router-redux
• Owner: gilbarbara
• License: mit
• Created: 2018-11-10T02:17:28.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-03-10T13:52:47.000Z (over 5 years ago)
• Last Synced: 2025-03-15T03:48:11.865Z (over 1 year ago)
• Topics: react, react-router, redux
• Language: JavaScript
• Size: 462 KB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# simple-react-router-redux

[![NPM version](https://badge.fury.io/js/simple-react-router-redux.svg)](https://www.npmjs.com/package/simple-react-router-redux) [![build status](https://travis-ci.org/gilbarbara/simple-react-router-redux.svg)](https://travis-ci.org/gilbarbara/simple-react-router-redux) [![Maintainability](https://api.codeclimate.com/v1/badges/c7e42fe511b80cc25760/maintainability)](https://codeclimate.com/github/gilbarbara/simple-react-router-redux/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/2fb41194cfedcefc7358/test_coverage)](https://codeclimate.com/github/gilbarbara/simple-react-router-redux/test_coverage)

Redux bindings for react-router. A tiny fork of [connected-react-router](https://github.com/supasate/connected-react-router)

## Setup

```bash

npm install simple-react-router-redux

```

## Usage

Setup your own history module:

```js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

```

And configure the store:

```js

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

```jsx

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(

  

    

      


        

           
Match
} />

           
Miss
} />

        

      

    

  ,

  document.getElementById('react'),

);

```


Enjoy!

## License

[MIT License](./LICENSE.md)