React-router TypeError: _this.props.history is undefined

Question

I am using react-router with react js and i following their documentation but facing this error

while compiling it shows the error,

TypeError: _this.props.history is undefined 

this is my index.js file

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, browserHistory, IndexRoute } from 'react-router';  ReactDOM.render(   <Router history={browserHistory}>     <Route path="/" component={App}>      </Route>   </Router>   ,   document.getElementById('root') ); 

and this is my App.js file

import React, { Component } from 'react'; import './App.css';  class App extends Component {     constructor(props){         super(props);          this.state = {             headerText: "Props from Header.",             contentText: "Props from content."         };     }     render() {         return (           <div className="App">             <ul>                 <li><a href="">Home</a></li>                 <li><a href="">Home</a></li>                 <li><a href="">Home</a></li>             </ul>           </div>         );     } }  export default App; 

Answer 1

This is because things changed in React Router starting with 4.0.0. You should now use BrowserRouter from react-router-dom package when you were using browserHistory. So your code will looks like:

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { BrowserRouter, Route } from 'react-router-dom';  ReactDOM.render(     <BrowserRouter>         <Route path="/" component={ App }/>     </BrowserRouter>, document.getElementById('root') ); 

Of course, you'll need to install react-router-dom first.

Also note that if you're using more than one Route element, you'll have to use a Switch as explained in this answer.

Answer 2

For me the solution was to change

1) component as child

<Route path="/path">  <MyComponent/> </Route> 

to

2) component as the "component" prop

<Route path="/path" component={MyComponent}> </Route> 

In both ways it renders, so it was very confusing for me, in examples they provide code as in first example. (I used the version 5.1.2 of the "react-router-dom" package at the moment).

Update

You can also use this way (for child components (children of "MyComponent") works only this one)

import {withRouter} from 'react-router-dom';  const componentClassWithHistory = withRouter(ChildComponent); export {componentClassWithHistory as ChildComponent}; 

or for default export

export default withRouter(ChildComponent) 

or for typescript

const componentClassWithHistory = (withRouter(ChildComponent as any) as any); export {componentClassWithHistory as ChildComponent}; 

Source: https://reacttraining.com/react-router/core/api/withRouter

Hope it helps someone.