Reagieren Router v4 und verschachtelte Routen: Index navlink bleiben immer aktiv

Question

Derzeit ich diese Routing-Struktur haben:

//Main.js:

<Router> 
    <Switch> 
     <Route exact path='/' component={AuthApp}/> 
     <Route path='/app' component={ContentApp}/> 
    </Switch> 
</Router> 

ich in meiner contentApp eine innere Navigation benötigen:

//ContentApp: 
<Route exact path={`${match.url}/`} component={Content}/> 
<Route exact path={`${match.url}/something`} component={Something}/> 
<Route exact path={`${match.url}/else`} component={Else}/> 
<Route exact path={`${match.url}/blahblah`} component={BlahBlah}/> 

Und einige Navigation oFC:

//Header.js 
<NavLink exact to='/app' >Dashboard</NavLink> 
<NavLink to='/app/something' >Something</NavLink> 
<NavLink to='/app/else' >Else</NavLink> 
<NavLink to='/app/blahblah' >BlahBlah</NavLink> 

So ist das Ding: es funktioniert gut, aber die erste Verbindung bleibt immer aktiv. Kann jemand vorschlagen, wie ich dieses Problem lösen kann? Dank

Answer 1

ändern Sie Ihre NavLink zu:

//Header.js 
<NavLink exact to='/app' >Dashboard</NavLink> 
<NavLink exact to='/app/something' >Something</NavLink> 
<NavLink exact to='/app/else' >Else</NavLink> 
<NavLink exact to='/app/blahblah' >BlahBlah</NavLink>