The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router

I am new to ReactJs. This is my code:

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

and compiling it with webpack. Also I added Main component to my aliases. The console throws these errors: I also read these links :

React Router failed prop 'history', is undefined

How do I resolve history is marked required, when value is undefined?

Upgrading React-Router and replacing hashHistory with browserHistory

and many searches around the web, but I couldn't fix this issue. React Router is version 4

Solution 1:

If you are using react-router v4 you need to install react-router-dom as well. After that, import BrowserRouter from react-router-dom and switch Router for BrowserRouter. It seems that v4 change several things. Also, the react-router documentation is outdated. This is my working code:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App';

ReactDOM.render((
     <BrowserRouter>
          <Route path="/" component={App}/>
     </BrowserRouter>
     ),
     document.getElementById('root')
);

Source

Solution 2:

Which version of React Router are you using? Router version 4 changed from passing in the browserHistory class to passing an instance of browserHistory, see the code example in the new docs.

This has been catching lots people who automatically upgrade; a migration document will be out 'any day now'.

You want to add this to the top:

import { createBrowserHistory } from 'history'

const newHistory = createBrowserHistory();

and

<Router history={newHistory}/>

Solution 3:

If you want to have multiple routes you can use switch like this,

import {Switch} from 'react-router'; 

then

<BrowserRouter>
     <Switch>
         <Route exact path="/" component={TodoComponent} />
         <Route path="/about" component={About} />
     </Switch>
</BrowserRouter>

Solution 4:

I got the same problem in ES6, but when I switched to use 'react-router-dom' library, the problem was solved. For all fans of ES6, here we go:

npm install --save react-router-dom

In index.js:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <HashRouter>
        <Route path="/" component={App}/>
    </HashRouter>
  ,
  document.getElementById('root')
);

Solution 5:

Version 4 of React Router changed several things. They made separate top level router elements for the different history types. If you're using version 4 you should be able to replace <Router history={hashHistory}> with <HashRouter> or <BrowserRouter>.
For more detail, see https://reacttraining.com/react-router/web/guides