React Router: Cannot read property 'pathname' of undefined

Alon picture Alon · Apr 25, 2017 · Viewed 35.5k times · Source

I've just started learning React and got stuck at this error.

Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router

Here is my code:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

The tutorial I was following uses React-Router 2.0.0, but on my desktop I'm using 4.1.1. I tried searching for changes but was unsuccessful in finding a solution that worked.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

Answer

Brennan Cheung picture Brennan Cheung · Apr 28, 2018

I got the above error message and it was extremely cryptic. I tried the other solutions mentioned and it didn't work.

Turns out I accidentally forgot to include the to prop in one of the <Link /> components.

Wish the error message was better. A simple required prop "to" not found or something like that would have been helpful. Hopefully this saves someone else who has encountered the same problem some time.