react-router中useRouteMatch返回的path和url有什么区别？

useRouteMatch() 返回的 path 和 url 核心区别 #

二者看起来完全一致，是因为你当前使用的是没有动态参数、没有通配符的静态路由，一旦路由包含动态片段，二者的差异会非常明显：

• path 是路由定义时的路径模式字符串
  它保留了你写路由规则时的占位符写法，比如你定义了路由规则<Route path="/users/:userId" />，当用户访问/users/123时，path的值就是/users/:userId。
  它的核心使用场景是嵌套路由规则拼接，比如你可以用${path}/posts生成/users/:userId/posts的子路由规则，完全符合嵌套路由的定义要求。
• url 是浏览器实际访问的真实路径字符串
  它是动态参数被替换成实际值后的最终路径，还是上面的场景，用户访问/users/123时，url的值就是/users/123。
  它的核心使用场景是页面跳转链接拼接，比如你给Link组件的to属性赋值${url}/posts，最终会生成可直接访问的/users/123/posts跳转路径。

示例验证 #

假设你有如下路由定义：

// 父路由定义
<Route path="/projects/:projectId">
  <ProjectDetail />
</Route>

在ProjectDetail组件内执行代码：

const { path, url } = useRouteMatch()

当用户访问/projects/456时，打印结果为：

• path：/projects/:projectId
• url：/projects/456

如果是静态路由比如<Route path="/about" />，访问/about时二者值确实都是/about，就是你现在观察到的情况。

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