Pude configurarlo con redux cambiando algunas cosas:

Primero, browserHistory ya no está definido en react-router . Una forma de recuperarlo es usar el history del paquete.

Deberá instalar (redux opcional):

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

En lugar de intentar importar el uso del historial del browserHistory :

 import { createBrowserHistory } from 'history';

Si desea usar redux, importe esto y agréguelo a sus reductores combinados:

 import { routerReducer as routing } from 'react-router-redux'; combineReducers({ home, about, routing, // new });

A continuación, crea el objeto de history .

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

Luego cambie su enrutador para usar el nuevo objeto de history

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

Todo lo demás debería ser igual.

Si alguien se encuentra con The prop history is marked as required in Router, but its value is undefined.

Es porque browserHistory ya no está disponible en react-router, vea la publicación para usar el paquete de historial en su lugar.

Relacionada

• Github ts-react-redux-startup : Proyecto que lo usa
• Migración a React Router 4 con Redux

Esta es una respuesta complementaria a la que Paul S publicó anteriormente. El crédito aún debe ir a Paul por publicarlo.

La razón m que complementa la respuesta es bcoz:-

1. Recibí errores con BrowserHistory y Link.
2. Tuve que incluir react-router-dom.
3. fue un error tipográfico (en la respuesta original de Pauls)

pasos de hilo:

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

paquete.json:

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

índice.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);

Debería haber una guía de actualización más cerca del lanzamiento completo. Adapté su código para la próxima versión beta en lugar del alfa actual. La versión beta aún no se ha lanzado, por lo que lamentablemente no hay una versión alojada de React Router con la que pueda probar esto.

 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);