TypeError: Cannot read property 'location' of undefined - connected-react-router - ReactRouter v5

Question

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

history.js

import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();

routerReducer.js

import { connectRouter } from 'connected-react-router';

const createRootReducer = (history) => {
   router: connectRouter(history)
}
export default createRootReducer;

store.js

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 => _.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

app.js

const App = () => {
return <IntlProvider locale={locale} messages={messages[locale]}>
    <Provider store={store}>
        <AppRouter/>
    </Provider>
</IntlProvider>
};

export default App;

AppRouter.js

 import {history} from "../history";
 const AppRouter = () => {
 return (
    <ConnectedRouter history={history}>
        <Layout>
                <Switch>
                    <Route exact path="/login" render={() => <Login/>}/>
                </Switch>
        </Layout>
    </ConnectedRouter>

 )
};

export default AppRouter;

Answer 1

I think for your purpose you can use history.push() for your purpose. You can use history.push('/') after the action succeed.

you can find another example in this FAQ: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components