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

set nav tab style class to active if currently in that route react react-router

本文关键字：路由器 如果 路由 选项 导航 样式 活动 设置      更新时间：2023-09-26

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

导航所在的简化布局

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 == 关于， 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 需要检查布局 props.kids 是否为空，或者它是关于或联系。 我真的不确定如何比较这个.props.children的值，如果它是一个反应组件

    提前感谢大家!!

    • 按照我们在评论中的对话，这是您在<li>标签上获取类名active方式：

    注意：我假设您使用的是 React Router v1.0.x，我强烈建议您使用最新版本 - 2.0，请参阅升级指南 

    import { Link, History } from 'react-router'
const Tab = React.createClass({
  mixins: [ History ],
  render() {
    let isActive = this.history.isActive(this.props.to, this.props.query)
    let className = isActive ? 'active' : ''
    return <li className={className}><Link {...this.props}/></li>
  }
})
// use it just like <Link/>, and you'll get an anchor wrapped in an `li`
// with an automatic `active` class on both.
<Tab href="foo">Foo</Tab>

    如果你使用的是 ES6 类，你会以非常相似的方式做，但不是使用 mixins，而是需要从上下文中"拉取"history（这是怎么做的 - 同样这是在 React Router v1.0.x 分支上）。

    相关文章：