我正在开发一个包含四个组件的小型 React 应用程序：Main、Nav、Timer 和 Countdown。当我运行它时（打开一个新选项卡并加载应用程序，而不是刷新），我希望这个应用程序同时呈现 Main 和 Timer 组件，但该应用程序只呈现 Main 组件，我看到一个空白页面，只呈现了 Nav 组件.

我尝试使用 IndexRoute，但出现了一个奇怪的错误，它对我不起作用。

这是我的代码：

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')
);

主要组件：

import React, {Component} from 'react';
import Nav from 'Nav';

class Main extends Component {

    render() {
        return (
            <Nav />
        );
    }
}

export default Main;

导航组件：

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;

其他两个组件仅包含一个简单的文本元素。