Accepted answer

It seems all you need in the Teams component is to navigate to the route's path it's rendered on. For this you can navigate to ".".


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

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

Consider routes:

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

A Teams component is rendered on "/settings/advanced/edit-teams", so navigating to "." will navigate to this path.

Edit react-router-v6-how-to-get-relative-index-path-in-component

Related Query

More Query from same tag