业务

点击“关于”锚点导航到默认子路由“企业历史”

问题复现

注意：本文所用路由版本为6.2.1

...
<BrowserRouter>
  <Routes>
    ...
    <Route path={'about'} element={<About/>}>
      <Route index element={<div>History</div>}/>
      ...
    </Route>
    ...
  </Routes>
</BrowserRouter>
...
function About () {
  return (
    <div>
      <NavLink to={''}>企业历史</NavLink>
      ...

      <Outlet/>
    </div>
  )
}

解决方案

利用<Navigate>做重定向

<BrowserRouter>
  <Routes>
    ...
    <Route path={'about'} element={<About/>}>
      <Route index element={<Navigate to={'history'} replace={true}/>}/>
      <Route path={'history'} element={<div>History</div>}/>
      ...
    </Route>
    ...
  </Routes>
</BrowserRouter>
...
function About () {
  return (
    <div>
      <NavLink to={'history'}>企业历史</NavLink>
      ...

      <Outlet/>
    </div>
  )
}

新的问题

现在/about路径相当于不复存在了，因为会重定向到/about/history