I was able to configure it with redux by changing a few things:

First, browserHistory is not defined on react-router anymore. One way to get it back is to use the package history.

You will need to install (redux optional):

npm i -S history react-router react-router-redux

Instead of trying to import browserHistory use:

import { createBrowserHistory } from 'history';

If you want to use redux then import this and add it to your combined reducers:

import { routerReducer as routing } from 'react-router-redux';

combineReducers({
  home, about,
  routing, // new
});

Next you create the history object

// redux
import { syncHistoryWithStore } from 'react-router-redux';
const history = syncHistoryWithStore(createBrowserHistory(), store);

// regular
const history = createBrowserHistory();

Then change your router to use the new history object

<Router history={ history } children={ Routes } />

Everything else should be the same.

If anyone runs into The prop history is marked as required in Router, but its value is undefined.

It is because browserHistory is no longer available in react-router, see post to use history package instead.

Related

• Github ts-react-redux-startup: Project that uses it
• Migrating to React Router 4 with Redux

This is a supplement answer to the one Paul S posted above. Credit should still goto paul for posting it.

Reason m supplementing the answer is bcoz:-

1. I got errors with BrowserHistory and Link.
2. I had to include react-router-dom.
3. was a typo (in Pauls original answer)

yarn steps:

yarn add react-router
yarn add react-router-dom

package.json:

 "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import {BrowserRouter, Link} from 'react-router-dom';


//let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props =>
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);

There should be an upgrade guide closer to full release. I adapted your code for the upcoming beta instead of the current alpha. The beta has not been released yet, so unfortunately there is no hosted version of React Router that you will be able to test this out with.

let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);