react-router-redux

import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, combineReducers, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import createHistory from 'history/createBrowserHistory'; import { Route } from 'react-router'; import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'; // Placeholder for your application's reducers const reducers = (state = {}, action) => state; // Placeholder components const Home = () => <div>Home</div>; const About = () => <div>About</div>; const Topics = () => <div>Topics</div>; // Create a history of your choosing (e.g., browser history) const history = createHistory(); // Build the middleware for intercepting and dispatching navigation actions const middleware = routerMiddleware(history); // Add the routerReducer to your store on the `router` key // Also apply our middleware for navigating const store = createStore( combineReducers({ ...reducers, router: routerReducer }), applyMiddleware(middleware) ); // Example of dispatching a navigation action (can be done from anywhere) // setTimeout(() => { // store.dispatch(push('/about')); // }, 2000); ReactDOM.render( <Provider store={store}> { /* ConnectedRouter will use the store from Provider automatically */ } <ConnectedRouter history={history}> <div> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </div> </ConnectedRouter> </Provider>, document.getElementById('root') );