React Router v5 路由切换时如何获取当前匹配的路由路径模式

核心逻辑说明 #

useRouteMatch 返回的匹配对象本身包含两类路径字段，你之前大概率取错了字段：

• url：实际被访问的路径值，就是你拿到的base/user/123这类带实际参数的路径
• path：路由定义时的占位符模式，正是你需要的base/user/:id格式

基础解决方案 #

直接取返回对象的path字段即可：

function test() {
  const route = useRouteMatch();
  useEffect(() => {
    // 取path字段即可拿到带占位符的路由模式
    console.log(route.path);
  }, [route]);
}

多层嵌套路由适配 #

如果是多级嵌套路由，需要确保子路由定义时拼接的是父级路由的path字段而非url，才能保证子组件拿到的path是完整的占位符模式：

// 父级路由组件
function BaseModule() {
  const parentMatch = useRouteMatch();
  return (
    <Switch>
      {/* 子路由拼接父级的path，不要拼接url */}
      <Route path={`${parentMatch.path}/user/:id`} component={UserDetail} />
    </Switch>
  )
}

// 子组件内获取完整占位符路径
function UserDetail() {
  const childMatch = useRouteMatch();
  // 输出结果为 /base/user/:id，符合需求
  console.log(childMatch.path);
  return <></>
}

可选优化方案 #

如果你的项目用了集中式路由表管理所有路由规则，直接从配置表中匹配当前路由对应的path字段即可，不需要依赖运行时的匹配结果，可控性更高。

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