connected-react-router: Uncaught TypeError: Cannot read property 'pathname' of undefined

The problem is you don’t have router in your state when HMR patch applying. You should wrap your rootReducer into connectRouter function.

store.replaceReducer(nextRootReducer); // your code now (probably)

to:

store.replaceReducer(connectRouter(history)(nextRootReducer)); // how it should be done

I am getting this issue in my environment, but the suggested solution is not working in my case:

This is my setup:

My codes

Store.js

import { applyMiddleware, createStore, compose } from 'redux';
import thunk from 'redux-thunk';
import { createBrowserHistory } from 'history'
import { connectRouter, routerMiddleware } from 'connected-react-router';

import rootReducer from '../Redux/Reducers/RootReducer';

export const History = createBrowserHistory();

const initialState = {};

const middleware = [
    routerMiddleware(history),
    thunk
];

const enhancers = [];

if (process.env.NODE_ENV === 'development') {
    enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__ && __REDUX_DEVTOOLS_EXTENSION__())
}

const Store = createStore(
    connectRouter(history)(rootReducer),
    initialState,
    compose(
        applyMiddleware(...middleware),
        ...enhancers
    )
);

export default Store;

App.js

import React from 'react';
import { render } from 'react-dom';
import { Route, Switch } from 'react-router';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';

import Store, { History } from './Redux/Store';
import RaiseIssuePage from './Pages/Issue/New';
import HomePage from './Pages/Index';

const PageRoutes = () => (
<div id="PageRouters">
    <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/issue/new" component={RaiseIssuePage} />
    </Switch>
</div>
);

class App extends React.Component {

render() {
    return (
    <Provider store={Store}>
        <ConnectedRouter history={History}>
            <PageRoutes />
        </ConnectedRouter>
    </Provider>
    );
}
}

render(<App />, document.getElementById('App'));

PageActions.js

import {INITIATE_PAGE } from '../Type';

export const initiatePage = (pageName) => (dispatch) => {
    console.log('initiatepageActions');
    dispatch({
        type: INITIATE_PAGE,
        payload: {pageName: pageName}
    });
}

PageReducer.js

import { INITIATE_PAGE } from '../Type';

const initialState = {
    pageName: '',
    issuePlace: {}
}

export default (state = initialState, action) => {
    switch (action.type) {
        case INITIATE_PAGE:
            const pageData = Object.assign({}, state, action.payload);
            return pageData;
    
        default:
            return state;
    }
}

RootReducer.js

import { combineReducers } from 'redux';
import PageReducer from './PageReducer';

export default combineReducers({
    page: PageReducer
});

Error

This is the error which I am getting:

More info

In my HomePage component, I have a call on initiatePage which is available in PageAction.js. This is what clearly gives me this error and then what I get a blank page in the browser. When commenting out this line, everything went smooth, leaving a couple of warning messages which are pretty much same which you can see in the image above.

The error indication is exactly the same as the original thread, but the suggested solution by @iceekey is not working in my case (as you can see, I have already added it in my code).

I really lost here. Any help on this issue is really appreciated. Thank you.

not sure if related but I was having similar if not identical error due to importing the wrong ConnectedRouter.

import { ConnectedRouter } from 'connected-react-router' instead of import { ConnectedRouter } from 'connected-react-router/immutable'

@progammer-rkt

Did you ever resolve this issue? I’m having very similar issue and very similar code.

Seems like issue is resolved. Thanks, @iceekey