React Router v6中组件如何获取不含子路由的相对索引路径

问题原因 #

useLocation() 返回的是浏览器地址栏当前的完整路径，会包含所有子路由段、动态参数，因此在子路由页面（如teams/1）调用时会拿到带参数的完整路径，无法直接获取当前挂载组件的路由本身的路径。 #

实现方式 #

根据实际使用场景选择对应方案即可：

方案1：仅需实现返回当前路由根的导航（最推荐，零额外逻辑） #

React Router 原生支持相对路径导航，在当前路由组件内调用navigate(".")时，.会自动解析为当前组件挂载的路由层级根路径，自动忽略后续所有子路由段，不需要手动拼接路径。
修改后的组件代码：

import { Outlet, useNavigate } from "react-router-dom";

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

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

这个方案完全满足跳转需求：访问teams/1时点击按钮会跳回teams，访问settings/advanced/edit-teams/1时点击会跳回settings/advanced/edit-teams，不需要额外获取路径字符串。 #

方案2：需要获取当前路由根路径字符串做其他逻辑 #

如果需要拿到teams/settings/advanced/edit-teams这类路径值做其他业务处理，可以用useResolvedPath钩子解析当前路由层级的相对路径.，就能拿到当前组件挂载的路由的完整路径，不需要修改路由配置。
实现代码：

import { Outlet, useNavigate, useResolvedPath } from "react-router-dom";

const Teams = () => {
  const navigate = useNavigate();
  // 解析当前路由层级的根路径
  const { pathname } = useResolvedPath(".");
  // 去掉开头的斜杠，得到根相对路径
  const basePath = pathname.replace(/^\//, "");

  return (
    <div>
      {/* 这里会输出目标值 teams 或者 settings/advanced/edit-teams */}
      当前路由根路径：{basePath}
      Teams
      <Outlet />
      <button onClick={() => navigate(basePath)}>Back to Teams</button>
    </div>
  );
};

实现原理

useResolvedPath解析相对路径时，是基于当前组件所在的路由上下文计算的：父路由组件的路由上下文停留在自身匹配的路由层级，子路由段是通过Outlet渲染的，不会改变父组件的路由上下文，因此解析.得到的永远是当前组件挂载的路由对应的路径，不受子路由、动态参数影响。 #

内容的提问来源于stack exchange，提问作者Kazuto_Ute