Learning Redux

Using the ConnectedRouter

Instead of using the BrowserRouter component from react-router-dom, we now need to use the ConnectedRouter component from react-router-redux. This component also requires us to pass a history property, which means we need to import that from our middleware.js file. Perfom the following steps:

1. Edit src/components/App.jsx and adjust the import statement from react-router-dom, remove the BrowserRouter as Router part:

import { Route } from 'react-router-dom'

2. Import the ConnectedRouter component from react-router-redux:

import { ConnectedRouter } from 'react-router-redux'

3. Import the history object:

import { history } from '../store/middleware'

4. Replace the Router component with ConnectedRouter and pass the history ...