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

【问题标题】：How do I correctly use IndexRoute in React Router?如何在 React Router 中正确使用 IndexRoute？
【发布时间】：2016-10-31 05:56:50
【问题描述】：

我正在将 React 用于一个小型网络应用程序。它有一个基本的 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;

【问题讨论】：

因为每个 url 都以 / 开头，所以 a:active 将始终将 Home 显示为活动。我建议输入path='home' 之类的内容并使用 indexRedirect。
或者如果您希望某些链接在仅呈现 Home 组件的情况下处于活动状态，则使用 react-router 中的<IndexLink />。
@Vikramaditya，这不能解决我使用 DRY 模板的问题吗？你能提供一个更简洁的答案吗？
你是如何设计活动路线的？
@QoP，忘记样式，这与我的问题无关......

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

对于索引路由，您应该使用 IndexLink comp ，否则 'Home' 将始终处于活动状态

import {Link,IndexLink} from 'react-router';

<IndexLink activeClassName="nav-active" to="/">Home</IndexLink>
<Link activeClassName="nav-active" to="about">About</Link>
<Link activeClassName="nav-active" to="music">Music</Link>
 ...

【讨论】：