如何在React Router中正确使用IndexRoute？

我正在将React用于一个小型Web应用程序。它具有5页的基本网站布局。（Home | About | Contact | Press | Shows），所以我想使用一个仅显示菜单，页眉和页脚的应用程序模板，而这{props.children}将是React Router的路由组件。为此，我使用了以下代码。假设所有进口都在那里...

这是我的路由器代码：

export default (props) => {
    return (
        <Router history={ hashHistory }>
            <Route path="/" component={ Template }>
                <IndexRoute component={ Home }></IndexRoute>
                <Route path="about"   component={ About }></Route>
                <Route path="music"   component={ Music }></Route>
                <Route path="store"   component={ Store }></Route>
                <Route path="shows"   component={ Shows }></Route>
                <Route path="contact" component={ Contact }></Route>
            </Route>
        </Router>
    );
}

现在这是我的模板：

export default ( props ) => {
    return (
        <div className="container">
            <Header />
            <Menu />
            { props.children }
            <Footer />
        </div>
    );
}

我知道出了点问题，没有CSS魔术的b / c，a：active始终是HOME和其他任何活动页面。IE（如果我单击“关于”），则“主页”和“关于”均处于活动状态。如何正确使用索引路由，还是应该在这种简单的应用程序中使用索引路由？如果没有，那么我又该如何使用像我拥有的​​模板那样的模板，并以另一种方式将页面作为组件传递？

更新：这是我的Menu.js文件...

const Menu = () => {
    return (
        <div>
          <nav>
            <Link activeClassName="nav-active" to="/">Home</Link>
            <Link activeClassName="nav-active" to="about">About</Link>
            <Link activeClassName="nav-active" to="music">Music</Link>
            <Link activeClassName="nav-active" to="shows">Shows</Link>
            <Link activeClassName="nav-active" to="store">Store</Link>
            <Link activeClassName="nav-active" to="contact">Contact</Link>
          </nav>
          <hr className="line" />
        </div>
    );
}

export default Menu;