Reactjs 在嵌套路由-反应路由器中保持初始路由活动

我的路线设置如下：

<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>
             );
     }
   })

export default React.createClass({
上下文类型：{
路由器：React.PropTypes.object
},
渲染：函数（）{
让isActive=this.context.router.isActive（this.props.to，true），
className=isActive？“active dropElement”：“dropElement”；
返回(

{this.props.children}

);
}
})

导航链接

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

export default React.createClass({
渲染：函数（）{
返回(

{this.props.children}

);
}
})

---

当我访问/elements时，这可以正常工作。我的问题是，当我导航到/Elements/buttons时，如何将活动类保持在“Elements”上？

传递给

isActive

的第二个参数告诉函数，只有当第一个参数与确切路径匹配时，才返回true

所以

应该是

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

---

为解释干杯！

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