保持初始路徑活躍在嵌套的路線 - 陣營路由器

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