保持初始路径活跃在嵌套的路线 - 阵营路由器

Question

我有我的路线设置为这样：

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="elements" component={Elements}> 
     <Route path="buttons" component={ElementsButtons}/> 
    </Route> 
    <Route path="design" component={Design}/> 
</Route> 

HTML

<DropElement to="/elements">Elements</DropElement> 
    <ul className="dropElement-list"> 
     <NavLink to="/elements/tables">Container</NavLink> 
     <NavLink to="/elements/buttons">Buttons</NavLink> 
... 

DropElement

export default React.createClass({ 
    contextTypes: { 
      router: React.PropTypes.object 
    }, 

    render: function() { 
      let isActive = this.context.router.isActive(this.props.to, true), 
        className = isActive ? "active dropElement" : "dropElement"; 

      return (
        <li className={className}> 
          <Link {...this.props}> 
            {this.props.children} 
          </Link> 
        </li> 
      ); 
    } 
    }) 

NavLink

export default React.createClass({ 
    render: function() { 
      return (
       <li> 
        <Link {...this.props}> 
          {this.props.children} 
        </Link> 
        </li> 
      ); 
    } 
}) 

，当我访问/元素这工作得很好。我的问题是，我如何在'元素'上保留活动类，同时我导航到/elements/buttons？

Answer 1

您传递给isActive的第二个参数是告诉函数只在第一个参数匹配确切路径时才返回true。

所以

let isActive = this.context.router.isActive(this.props.to, true) 

应该

let isActive = this.context.router.isActive(this.props.to) 

isActive documentation