Reagieren Router: verschachtelte Ressourcen

Question

Ich habe eine zwei Routen:

/resource/1/ 

/resource/1/nested_resource/2 

und geeignete <Link /> Komponenten. Wenn ich zur Route gehe /resource/1/ - nur Links, die weiterleiten an /resource/1/ haben active Klasse.

Aber wenn ich gehe /resource/1/nested_resource/2 Pfad, Links für /resource/1/ und haben aktive Klasse.

Gibt es im zweiten Fall eine Möglichkeit, die aktive Klasse nur für verschachtelte Routen-Links wie /resource/1/nested_resource/2 anzugeben?

<Route path='/' component={Layout}> 
    <IndexRoute component={Index} /> 
    <Route path='resource' > 
    <IndexRoute component={Resources} onEnter={onEnter} /> 
    <Route path='new' component={NewResource} /> 
    <Route path=':resourceId' onEnter={onEnter}> 
     <IndexRoute component={ShowResource} onEnter={onEnter} /> 
     <Route path='nested_resource' > 
     <Route path=':nestedResourceId' component={NestedResource} /> 
     <Route path='new' component={NestedResourceNew} /> 
     </Route> 
    </Route> 
    </Route> 
</Route> 

Answer 1

können Sie verwenden eine < IndexLink />, die nur dann aktiv ist, wenn die Eltern Route Streichhölzer.

reagieren-Router documentation sagt -

Wenn Sie < Link zu = "/" waren> Startseite in dieser App, wäre es immer aktiv sein, da jede URL mit/beginnt. Dies ist ein Problem, weil wir mit Home verknüpfen möchten, aber nur aktiv sein sollen, wenn Home gerendert wird.

Um eine Verbindung zu haben/die nur aktiv ist, wenn die Home Route gerendert wird, verwenden Sie < IndexLink to = "/"> Start </IndexLink>.