Halten Anfangsroute aktiv in verschachtelten Route - React Router

Question

Ich habe meine Routen wie so ein:

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

Das funktioniert gut, wenn ich Zugriff auf /Elemente. Meine Frage ist, wie behalte ich die aktive Klasse auf "Elements", während ich zu /elements/buttons navigiere?

Answer 1

Das zweite Argument, das Sie an isActive übergeben, besagt, dass die Funktion nur true zurückgibt, wenn das erste Argument mit dem exakten Pfad übereinstimmt.

So

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

sollte

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

isActive documentation