How to migrate from react-router v1 to v4 ? {this.props.children} - reactjs

Question

Been trying to migrate from react-dom version 1 to v4.
Since older react-router versions used nested routes it is a little counter-intuitive in v4 since you can basically put <Route />s everywhere. And from official v4 docs it might seem unclear how to migrate this piece - {this.props.children} since it uses history component to use hash portion of the URL.
I thought I had to use <Router history={history}></Router> to get it working in v4. However, <HashRouter></HashRouter> is the way to go with v4 in this case.
Check it out below.
So, to give you a quick example here's what I had in v1:
v1.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link } from "react-router";
import Index from './components/Index';
class App extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
let documentReady = () => {
const reactNode = document.getElementById('react');
if(reactNode){
ReactDOM.render(
<Router history={history}>
<Route component={App}>
<Route path='/', component={Index} />
</Route>
</Router>
, reactNode);
}
};
$(documentReady)
And here's working example of
v4.
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch, Link } from 'react-router-dom';
import Index from './components/Index';
class App extends React.Component {
render() {
return (
<div>
<Switch>
<Route path="/" component={Index} />
</Switch>
</div>
)
}
}
let documentReady = () => {
const reactNode = document.getElementById('react');
if(reactNode){
ReactDOM.render(
<HashRouter>
<Route component={App} />
</HashRouter>
, reactNode);
}
};
$(documentReady)
Note that you have to import HashRouter instead of Router v4, whereas in v1 it was a History, a separate package to be installed along with react-router.
Hope that saves somebody time and
Here's a great resource from François Zaninotto => React Router v4 Unofficial Migration Guide