reactjs - React Router v4 和嵌套路由 : index navlink always remain active

Question

目前我有这个路由结构:

//Main.js:

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

我的 ContentApp 需要一些内部导航:

//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}/>

还有一些导航:

//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>

所以事情是:它工作得很好，但是第一个链接始终保持事件状态。谁能建议我如何解决这个问题？谢谢

Answer 1

只需修改您的 NavLink到:

//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>