Get started with react-router-redux CDN

MIT licensed

React Router Redux: Connects Router to Redux, dispatches navigation actions.

Tags:
  • react
  • redux
  • router

Stable version

Copied!

How to start using react-router-redux CDN


import React from 'react';
import { BrowserRouter as Router, Route, Switch, ReduxRouterConnection } from 'react-router-dom';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { routerReducer, syncHistoryWithStore } from 'react-router-redux';

// Sample reducers
const initialState = {};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    // Handle actions here
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  routing: routerReducer,
  // Add other reducers here
});

// Create the Redux store
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  applyMiddleware(ReduxRouterConnection)
);

// Create the Router with the Redux store
const history = syncHistoryWithStore(browserHistory, store);
const RouterWithRedux = () => (
  <Router history={history}>
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      {/* Add more routes here */}
    </Switch>
  </Router>
);

// Sample components
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

// Render the RouterWithRedux component to the DOM
ReactDOM.render(<RouterWithRedux />, document.getElementById('root'));
Copied!
Copied!

All versions