reactjs - 同级路由不会被替换，而是附加到之前的 url react 路由器 v6

Question

我一直在使用 react-router v6 在 React 中实现嵌套路由功能。 当我转到下一个兄弟路线时，它只是将其添加到前一个兄弟 route ，例如，我希望当我转到“sibling 1”时，它应该显示 url/home/sibling1，然后如果我想转到“sibling 2”，它应该显示 url/home/sibling1应该路由到 url/home/sibling2 ，但事实并非如此，它只是将兄弟 2 附加到 1，就像这样“url/home/sibling1/sibling2”。

这是我的路线文件:-

function App() {
  return (
    <BrowserRouter> 
      <Routes>
        <Route path='/home' element={<Home />} >
          <Route path='sibling1' element={<Sibling1 />} />
          <Route path='sibling2' element={<Sibling2 />} />
          <Route path='sibling3' element={<Sibling3 />} />
        </Route>
        <Route path="*" element={<Page404 />} />
      </Routes>
    </BrowserRouter>
  );
}

这是我从兄弟 1 导航到兄弟 2 的方式:-

<div className='btn'>
  <Link to="sibling2">
    <button>
      sibling2
    </button>
  </Link>
</div>

Answer 1

要从其他同级组件之一导航到同级路由，您需要相对于父 Routes 组件进行导航。在目标路径前面添加 ".."。 ".." 删除一个路径段，即从 "/home/sibling1" 到 "/home"，然后相对导航到结果路径“/home/sibling2”。

示例:

<Link to="../sibling2">
  <button>
    sibling2
  </button>
</Link>