React Router v4 和嵌套路由：索引 navlink 始终保持活动状态

Question

目前我有这个路由结构：

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

还有一些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>

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

Answer 1

在React Router V6中使用end= {true}，就像下面的例子一样，

<NavLink
              className={({ isActive }) =>
                isActive ? "active nav-link" : "nav-link"
              }
              to="/admin/new"
            >
              Add New
            </NavLink>
          </li>
          <li class="nav-item">
            <NavLink
              className={({ isActive }) =>
                isActive ? "active nav-link" : "nav-link"
              }
              to="/admin"
              end={true}
            >
              Manage
            </NavLink>

在此示例中，我使用两条路由/admin并/admin/new检测/admin/new我添加的路径end= {true}。

Answer 2

只需将您的修改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>