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"
The error is because the api in React Router v4 is totally different. You can try this:
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
const Main = () => <h1>Hello world</h1>;
ReactDOM.render(
<Router>
<Route path='/' component={Main} />
</Router>,
document.getElementById('app')
);
You can review the documentation to learn how it works now.
Here I have a repo with routing animation.
And here you can find a live demo.