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

Looks like this is a regression of https://github.com/supasate/connected-react-router/issues/54, and potentially related to https://github.com/supasate/connected-react-router/issues/183

But I am getting a TypeError: Cannot read property 'pathname' of undefined error when simply following the docs.

// reducers.ts
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'

export const createRootReducer = (history) => combineReducers({
  routing: connectRouter(history)
})

// store.ts
import { createBrowserHistory } from 'history'
import { createStore, applyMiddleware } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { createRootReducer } from './reducers'

export const history = createBrowserHistory()

export const store = createStore(
  createRootReducer(history),
  applyMiddleware(routerMiddleware(history))
)

// app.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Route } from 'react-router-dom'
import { ConnectedRouter } from 'connected-react-router'
import { store, history } from './store'

const App = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <React.Fragment>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/topics" component={TopicsPage} />
      </React.Fragment>
    </ConnectedRouter>
  </Provider>
)

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

// versions
"react": "^16.6.0"
"react-dom": "^16.6.0"
"react-redux": "^5.1.0"
"react-router-dom": "^4.3.1"
"redux": "^4.0.1"
"connected-react-router": "^5.0.1"
"history": "^4.7.2"

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 32
Comments: 32 (3 by maintainers)

Most upvoted comments

For me, this arrived when I had not passed the value of prop “to” in NavLink. I hope this may work for a few people over here. 😄

apsrcreatix on Apr 16, 2020

Found a solution. Do not define a router props when combining reducers, but pass it in the createStore call as connectRouter(history)(rootReducer), f.e.

root-reducer.js

export default combineReducers({
    user: userReducer,
    products: productsReducer,
    // whatever reducers you have
});

store.js

import { createStore, compose, applyMiddleware } from 'redux';
import { connectRouter, routerMiddleware, RouterState } from 'connected-react-router';
import { createBrowserHistory} from 'history';
import createRootReducer from './root-reducer';

instrumenter = window.__REDUX_DEVTOOLS_EXTENSION__();
export const history = createBrowserHistory();
export const rootReducer = createRootReducer;
const initialState: any = {};

export const store = createStore(
    connectRouter(history)(rootReducer),
    initialState,
    compose(
        applyMiddleware(routerMiddleware(history)),
        instrumenter,
    ),
);

Worked like charm for me.

miestr on Dec 3, 2018

Just a note that I also faced this error while using NavLink on react-router-dom 5.1.2. The error happened because I forgot the to attribute. It might be useful to make this error clearer.

clovis1122 on Jan 5, 2020

@greevz It might be related to the requirement that routerReducer must be placed under key router, while you seem to use routing.

Check https://github.com/supasate/connected-react-router/blame/master/README.md#L42

sgal on Nov 16, 2018

Same issue here. Trying to migrate from react-router-redux. Followed the docs and I get this error. Have tried several old version as well, but nothing is working.

I have verified that I am using the router key as well.

mshick on Nov 19, 2018

I downgraded to v4.3 and that seemed to fix it. Not ideal though, as I try to keep everything up to date using https://www.npmjs.com/package/npm-check-updates

bschwartz757 on Nov 13, 2018

But how to implement on react 18

rohithalwits on Apr 25, 2022