Render Two Components at First Run - reactjs

Question

I'm working on a small react app with four components: Main, Nav, Timer, and Countdown. When I run it (open a new tab and load the app, not refresh), I want this app to render Main and Timer components simultaneously, but the app only renders Main Component and I see a blank page with only Nav component has been rendered.
I tried using IndexRoute but I got a strange error and it didn't work for me.
Here's my code:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom';
import Main from 'Main';
import Timer from 'Timer';
import Countdown from 'Countdown';
ReactDOM.render(
<Router history={hashHistory}>
<div>
<Route path="/" component={Main} />
<Route exact path="/timer" component={Timer} />
<Route path="/countdown" component={Countdown} />
</div>
</Router>,
document.getElementById('app')
);
Main Component:
import React, {Component} from 'react';
import Nav from 'Nav';
class Main extends Component {
render() {
return (
<Nav />
);
}
}
export default Main;
Nav Component:
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
class Nav extends Component {
render() {
return (
<div className="top-bar">
<div className="top-bar-left">
<ul className="menu">
<li className="menu-text">React Timer</li>
<li><NavLink to="/timer" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Timer</NavLink></li>
<li><NavLink to="/countdown" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Countdown</NavLink></li>
</ul>
</div>
<div className="top-bar-right">
<ul className="menu">
<li className="menu-text">Created by Milad Fattahi</li>
</ul>
</div>
</div>
);
}
}
export default Nav;
The other two components contain only a simple text element.

Answer 1

IndexRoute and hashHistory are not available in react-router-dom. Make use of Switch to render only first matching Route. You can then have the Child Routes in the component itself.
Also when you use Switch , have the route with path="/" at last otherwise it will match it at the begining and will not render your other routes
You can configure your time component to be a child of the Main component like
import {BrowserRouter as Router, Route} from 'react-router-dom';
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Main} />
</Switch>
</Router>,
document.getElementById('app')
);
Then in Main component
import React, {Component} from 'react';
import Nav from 'Nav';
import {Route, Redirect} from 'react-router-dom'
class Main extends Component {
render() {
return (
<div>
<Nav />
<Redirect to="/timer" />
<Route exact path="/timer" component={Timer} />
<Route path="/countdown" component={Countdown} />
</div>
);
}
}
export default Main;