React Router v6如何获取带参数占位符的当前路由path字符串

v6 移除了 v5 中useRouteMatch直接返回带参数占位符path的内置能力，官方没有提供开箱即用的对应API，可以根据自己项目的路由使用场景选下面的方案实现：

通用方案：统一维护路由配置做匹配 #

这个方案全版本v6都能用，不管你是写JSX形式的Route还是用useRoutes配置路由都适配：
把所有路由的path模式统一抽成配置表维护，在组件里拿当前的pathname去匹配配置项，就能拿到原始的带占位符的path串：

import { useLocation, matchPath } from 'react-router-dom'

// 所有路由path统一在这里维护，和你渲染Route时传入的path保持一致
const appRoutes = [
  { path: '/moose/kite/:id', element: <KiteDetailPage /> },
  { path: '/other/path/:pageId', element: <OtherPage /> }
]

function KiteDetailPage() {
  const { pathname } = useLocation()
  // 找到和当前访问地址匹配的路由配置
  const currentRoute = appRoutes.find(route => matchPath(route.path, pathname))
  const patternPath = currentRoute?.path 
  // 这里patternPath的值就是 /moose/kite/:id，和v5 useRouteMatch返回的path完全一致
}

如果是嵌套路由场景，可以配合React Context逐层传递父级的path前缀，子路由拼接自己的path段就能拿到完整的模式串，逻辑和v5的嵌套路由path拼接完全一致。

v6.4+ 数据路由专属方案：用useMatches直接取 #

如果你项目升级到了v6.4及以上版本，用的是官方推荐的createBrowserRouter/createHashRouter这类数据路由写法，直接用官方提供的useMatches钩子就能拿到，不需要自己维护匹配逻辑：

import { useMatches } from 'react-router-dom'

function KiteDetailPage() {
  const matchList = useMatches()
  // 匹配数组的最后一项就是当前渲染的最深层路由
  const currentRoute = matchList.at(-1)
  // route.path就是你定义路由时写的原始带占位符的path
  const patternPath = currentRoute.route.path
}

注意：如果是index路由，对应项的route.path为空，取父级匹配项的path即可，和你写路由时的结构对应。

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