一、版本

{
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0"
}

二、问题描述

学习使用react-router中的 NavLink标签 做嵌套路由的时候，发现默认子路由会一直被添加active的类名，进而导致UI显示默认路由一直显示被选中状态。

1.路径显示正常，也展示默认子路由页面

2.点击其他路由链接发现都属于默认选中状态

3.查看DOM结构发现企业历史所处a标签一直有被添加active的类名：

三、代码组织

App.js

<Routes>
    <Route exact path='/' element={<Home />} />
    <Route path='/about' element={<About />}>
      <Route index element={<History />} />
      <Route path='/about/culture' element={<Culture />} />
      <Route path='/about/contact' element={<Contact />} />
      <Route path='/about/*' element={<NoMatch />} />
    </Route>
    <Route path='/profile' element={<Profile />} />
    <Route path='/user' element={<User />} />
    <Route path='*' element={<NoMatch />} />
    <Route path='/login' element={<Login />} />
</Routes>

about.js

<div>
    <NavLink to=''>企业历史</NavLink>
    <NavLink to='/about/culture'>企业文化</NavLink>
    <NavLink to='/about/contact'>联系我们</NavLink>
    <Outlet />
</div>

四、解决方案

使用 Navigate 重定向

// 此处通过设置 Navigate 重定向至/about/history

<Routes>
    <Route exact path='/' element={<Home />} />
    <Route path='/about' element={<About />}>
      <Route index element={<Navigate to={'history'} />} />
      <Route path='/about/history' element={<History />} />
      <Route path='/about/culture' element={<Culture />} />
      <Route path='/about/contact' element={<Contact />} />
      <Route path='/about/*' element={<NoMatch />} />
    </Route>
    <Route path='/profile' element={<Profile />} />
    <Route path='/user' element={<User />} />
    <Route path='*' element={<NoMatch />} />
    <Route path='/login' element={<Login />} />
</Routes>

// NavLink标签 跳转地址也应该对应设置为跳转地址 - /about/history
<div>
    <NavLink to='/about/history'>企业历史</NavLink>
    <NavLink to='/about/culture'>企业文化</NavLink>
    <NavLink to='/about/contact'>联系我们</NavLink>
    
    <Outlet />
</div>

五、结果展示

1.点击默认子路由效果

2.点击跳转其他路由

3.DOM元素类名正常