React router v6：如何获取组件中的相对索引路径？

Kazuto_Out

如何从反应路由器中的组件获取相对索引路径，不包括子路由？例如：

index.js：

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
        </Route>
        <Route path="settings" element={<Settings />}>
          <Route path="advanced" element={<Advanced />}>
            <Route path="edit-teams" element={<Teams />}>
              <Route path=":teamId" element={<Team />} />
            </Route>
          </Route>
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
);

当我访问 URLteams或teams/1时，我希望能够teams从组件中获取值（根相对 URL）Teams。当我访问settings/advanced/edit-teamsorsettings/advanced/edit-teams/1时，值应该是settings/advanced/edit-teams

到目前为止我已经尝试过：

const Teams = () => {
  //this gives me "settings/advanced/edit-teams/1" instead of "settings/advanced/edit-teams" when I visit "settings/advanced/edit-teams/1"
  const { pathname } = useLocation();
  const navigate = useNavigate();

  return (
    <div>
      Teams
      <Outlet />
      <button onClick={() => navigate(pathname)}>Back to Teams</button>
    </div>
  );
};

德鲁里斯

似乎您在Teams组件中需要的只是导航到path它所呈现的路线。为此，您可以导航到"."。

例子：

const Teams = () => {
  const navigate = useNavigate();

  return (
    <div>
      Teams
      <Outlet />
      <button onClick={() => navigate(".")}>Back to Teams</button>
    </div>
  );
};

考虑路线：

<Routes>
  <Route path="/">
    <Route path="teams" element={<Teams />}>
      <Route path=":teamId" element={<Team />} />
    </Route>
    <Route path="settings" element={<Settings />}>
      <Route path="advanced" element={<Advanced />}>
        <Route path="edit-teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
        </Route>
      </Route>
    </Route>
  </Route>
</Routes>

组件在Teams上呈现"/settings/advanced/edit-teams"，因此导航到"."将导航到此路径。