如果当前在该路由中，则将导航选项卡样式类设置为活动

【问题标题】：set nav tab style class to active if currently in that route react react-router如果当前在该路由中，则将导航选项卡样式类设置为活动
【发布时间】：2016-06-14 14:18:27
【问题描述】：

我有一个 react 和 react-router 应用程序，它使用 2 个嵌套路由来提供 3 个总路由：/、/about、/contact。当我单击链接转到每条路线时，我的导航上位于父路线中的选项卡会更改样式并显示其活动状态，我相信这是一些引导魔法。问题是当我访问 /about 或 /contact 时，导航选项卡未激活。我是新来的反应，但我想我需要将样式属性绑定到检查路由属性或组件的道具或状态的条件。我不完全确定如何做到这一点，任何帮助将不胜感激。

导航所在的简化布局

export default class Layout extends React.Component {
  render() { 
      return (
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </div>
    )}}

在

我需要类似 class={if this.props.children == About, class=active, class=""} 之类的东西

渲染路线

render((
  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
  ), document.getElementById('app'))

是的，如上所述，li 需要检查 Layouts props.children 是否为空，或者它是关于还是联系。如果它是一个反应组件，我真的不确定如何比较 this.props.children 的值

谢谢大家提前！！！

【问题讨论】：

• 我建议阅读 github.com/reactjs/react-router/blob/master/docs/API.md#link 的文档——此外，在所有文档示例中，路由 /about 和 contact（即嵌套路由）放弃了 /。
• 非常感谢，IndexLink 非常有用。当您说“在所有文档示例中，路由 /about 和联系（即嵌套的）放弃 /。”时，我不确定您的意思。您能详细说明吗？
• 在您的代码中，path="/about" 等，它与文档不匹配，其中指定：path="about"（没有正斜杠），我看到一些 github 问题，人们讨论了斜杠导致问题。
• 好的，谢谢，很高兴知道。我认为父母仍然需要 path="/" 。仍然无法让课堂活跃起来。认为它的 b/c 将链接设置为活动类，但引导程序会查找具有活动类的
• 元素，并且不会通过路由使选项卡处于活动状态，只有当它单击时...我认为。