Router history with react-router 4.0.0

Question

In react-router 4.0.0 the history provisoning seems to have changed, with the following index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
import App from './components/App';
import './index.css';

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

I get:

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

and an error afterwards. I browsed the code but can't find any example or API how that has changed.

Answer 1

React Router v4 changed things little bit. They made separate top level router elements. Replace <Router history={hashHistory}> with <HashRouter> in your code.

Hope this will help full.

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

<HashRouter>
    <Route path = "/getapp" component = {MainApp} />
</HashRouter>

Answer 2

hashHistory is no longer an exported object of react-router. If you want to use a hash history, you can just render a <HashRouter>.

import { HashRouter } from 'react-router-dom'

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
), holder)