React Router 6如何实现未知完整层级的相对路径部分匹配？

1. 相对层级路径部分匹配实现 #

React Router 6 原生支持基于当前路由层级的相对匹配，不需要知晓完整路由链，核心实现方式如下：

• 用useMatch钩子配合相对路径语法：只要在当前路由层级的组件内，传入以.开头的相对路径即可，不需要硬编码完整父级路径。比如在/users对应的组件内，写useMatch("./:userId")就能匹配到/users/1、/users/1/edit这类带用户ID的子路径，不用手动拼接/users/:userId前缀。
• 嵌套路由的Outlet上下文自动继承父级路径：只要路由是嵌套定义的，子路由、子组件内的所有路由相关操作默认都基于当前父级路径的相对路径，不需要额外处理完整路径拼接。

2. 路由中提取当前选中用户ID #

不需要知晓完整路由层级，直接通过内置钩子即可获取参数：

• 如果路由是嵌套定义的，父级路由配置path: "/users/:userId"，在任意子层级的组件内调用useParams()就能直接拿到userId的值，不管路径后面有没有加/edit这类后缀。
• 如果不想依赖嵌套路由定义，也可以用useMatch("./:userId")?.params.userId直接在当前组件内提取，路由匹配成功就会返回对应ID，匹配失败返回undefined。

3. MUI Tabs 激活状态适配方案 #

只需要把Tab的value关联相对路径，配合路由匹配钩子即可实现正确的激活状态判定，代码示例如下：

import { useMatch, useResolvedPath } from 'react-router-dom';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

function UserTabs() {
  // 匹配用户列表页（仅匹配/users）
  const isUserListActive = useMatch({ path: ".", end: true });
  // 匹配所有带用户ID的子路径（包含/users/1、/users/1/edit等）
  const isUserDetailActive = useMatch({ path: "./:userId", end: false });

  const activeTab = isUserDetailActive ? 1 : 0;

  return (
    <Tabs value={activeTab}>
      <Tab label="用户列表" to="." />
      {/* to属性动态替换为用户选择器返回的ID即可 */}
      <Tab label="当前用户详情" to="./1" />
    </Tabs>
  );
}

注意：Tab的to属性用相对路径写法，React Router会自动基于当前父级路径拼接完整路径，不需要手动写/users/xxx。配置end: false可以实现前缀匹配，只要路径前缀符合就判定为激活，刚好适配/users/1/edit这类深层子路径的激活状态展示。

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