title: TypeError: Cannot read property 'location' of undefined - connected-react-router - ReactRouter v5
body: <p><a href="https://i.stack.imgur.com/4Rpcw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Rpcw.png" alt="error"></a>
  Hello, I built an app using React and Redux, I searched for how handling redirection after a redux action and I found the connected-react-router package from ReactRouter, I followed all the official documentation but I get the following error : TypeError: Cannot read property 'location' of undefined, I saw many topics about this issue and I tried to downgrade my redux version to 6.0.1 and I also tried to move my history to a separate file </p>
  
  <p>history.js </p>
  
  <pre><code>import { createBrowserHistory } from 'history';
  export const history = createBrowserHistory();
  </code></pre>
  
  <p>routerReducer.js </p>
  
  <pre><code>import { connectRouter } from 'connected-react-router';
  
  const createRootReducer = (history) =&gt; {
     router: connectRouter(history)
  }
  export default createRootReducer;
  </code></pre>
  
  <p>store.js </p>
  
  <pre><code>import { applyMiddleware, combineReducers, createStore } from 'redux';
  import { composeWithDevTools } from 'redux-devtools-extension';
  import _ from 'lodash';
  import thunk from 'redux-thunk';
  import {history} from "./history";
  import { connectRouter,routerMiddleware } from 'connected-react-router'
  import routerReducer from './routerReducer';
  import browse from "../components/browse/duck/reducer";
  import collection from "../components/collections/collection/duck/reducer";
  import myCollections from "../components/collections/my-collections/duck/reducer";
  import startupDetails from "../components/startups/startup-details/duck/reducer";
  import session from "./session/reducer";
  import activities from "../components/activities/duck/reducer";
  import compare from "../components/compare/duck/reducer";
  import profiles from "../components/profiles/duck/reducer";
  import StartupReducer from "../components/startups/startup-details/detail- 
  card/tabs/duck/reducers/StartupReducer";
  import ActivityReducer from "../components/activities/activity-details/details- 
  card/tabs/duck/reducers/ActivityReducer";
  
  
  const selectedReducers = ['browse', 'collection', 'myCollections', 'startupDetails', 
  'session', 'activities', 'compare', 'StartupReducer' , 'ActivityReducer','routerReducer'];
  
  const stateSanitizer = state =&gt; _.pick(state, selectedReducers);  
  
  
  const middleware = [
      thunk,
      routerMiddleware(history)
  ];
  
  const composeEnhancers = composeWithDevTools({stateSanitizer});
  
  const enhancer = composeEnhancers(applyMiddleware(...middleware ));
  
  const reducers = combineReducers({
      routerReducer,
      browse,
      collection,
      myCollections,
      startupDetails,
      session,
      activities,
      compare,
      profiles,
      StartupReducer,
      ActivityReducer
  });
  
  const store = createStore(reducers, enhancer);
  
  export default store
  </code></pre>
  
  <p>app.js </p>
  
  <pre><code>const App = () =&gt; {
  return &lt;IntlProvider locale={locale} messages={messages[locale]}&gt;
      &lt;Provider store={store}&gt;
          &lt;AppRouter/&gt;
      &lt;/Provider&gt;
  &lt;/IntlProvider&gt;
  };
  
  export default App;
  </code></pre>
  
  <p>AppRouter.js</p>
  
  <pre><code> import {history} from "../history";
   const AppRouter = () =&gt; {
   return (
      &lt;ConnectedRouter history={history}&gt;
          &lt;Layout&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path="/login" render={() =&gt; &lt;Login/&gt;}/&gt;
                  &lt;/Switch&gt;
          &lt;/Layout&gt;
      &lt;/ConnectedRouter&gt;
  
   )
  };
  
  export default AppRouter;
  </code></pre>