在 React Router v6 中获取当前路由的路径模式

问题描述

在 React Router v6 中，如何获取当前匹配路由的路径模式？例如，对于一个配置如下的路由：

jsx

<Route
    path=":state/:city*"
    element={
        <Page />
    }
/>

在 Page 组件中，我们希望获取路径模式 ":state/:city*"，而不是实际的路由参数值。

解决方案

React Router v6 不直接提供获取当前路由路径模式的 hook，但我们可以通过以下几种方法实现这一需求。

方法一：使用 matchRoutes（推荐）

这是最官方和可靠的方法，通过预先定义的路由配置来匹配当前路径：

jsx

import { matchRoutes, useLocation } from "react-router-dom"

// 定义应用的所有路由
const appRoutes = [
  { path: '/' },
  { path: ':state' },
  { path: ':state/:city' },
  { path: ':state/:city/*' }
]

function usePathPattern() {
  const location = useLocation()
  const matches = matchRoutes(appRoutes, location)
  
  if (!matches) return null
  
  return matches
    .map(({ route }) => route.path)
    .filter(Boolean)
    .join('/')
    .replaceAll('/*', '/') // 清理通配符格式
}

// 在组件中使用
function Page() {
  const pathPattern = usePathPattern() // 返回 ":state/:city/*"
  // ...
}

支持嵌套路由

此方法自动支持嵌套路由，会返回完整的匹配路径模式链。

方法二：使用路由参数替换

如果无法访问应用的路由配置，可以使用参数替换的方法：

jsx

import { useLocation, useParams } from "react-router-dom"

function usePathPattern() {
  const { pathname } = useLocation()
  const params = useParams()
  
  return Object.entries(params).reduce((path, [key, value]) => {
    if (value) {
      return path.replace(
        new RegExp(`/${value}(?=/|$)`), 
        `/:${key}`
      )
    }
    return path
  }, pathname)
}

局限性

这种方法可能无法正确处理复杂的路由模式，特别是当参数值包含特殊字符或与路由结构冲突时。

方法三：使用内部 RouteContext（高级用法）

警告

此方法依赖于 React Router 的内部 API，可能在未来版本中失效。

jsx

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

function usePathPattern() {
  const routeContext = useContext(UNSAFE_RouteContext)
  
  return useMemo(() => {
    return routeContext.matches
      .map(({ route }) => route.path)
      .filter(Boolean)
      .join('/')
      .replaceAll('/*', '/')
  }, [routeContext.matches])
}

完整示例

以下是一个完整的示例，展示如何在应用中使用路径模式：

jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { matchRoutes, useLocation } from 'react-router-dom'

// 定义路由配置
const appRoutes = [
  { path: '/' },
  { path: 'about' },
  { path: 'users' },
  { path: 'users/:userId' },
  { path: 'users/:userId/posts' },
  { path: 'users/:userId/posts/:postId' }
]

function usePathPattern() {
  const location = useLocation()
  const matches = matchRoutes(appRoutes, location)
  
  return matches?.map(({ route }) => route.path).filter(Boolean).join('/') || '/'
}

function NavigationInfo() {
  const pathPattern = usePathPattern()
  
  return (
    <div>
      <h3>当前路由模式: {pathPattern}</h3>
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <NavigationInfo />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users" element={<Users />} />
        <Route path="users/:userId" element={<UserProfile />} />
        <Route path="users/:userId/posts" element={<UserPosts />} />
        <Route path="users/:userId/posts/:postId" element={<PostDetail />} />
      </Routes>
    </BrowserRouter>
  )
}

注意事项

性能考虑：频繁调用 matchRoutes 可能影响性能，建议在需要时使用或添加适当的缓存机制。
路由配置一致性：确保 appRoutes 配置与实际路由定义保持一致。
通配符处理：不同方法对通配符 * 的处理可能不同，需要根据实际情况调整。
服务端渲染：这些方法主要适用于客户端渲染，服务端渲染需要特殊处理。

结论

获取当前路由的路径模式在 React Router v6 中需要一些额外工作。推荐使用基于 matchRoutes 的方法，因为它最可靠且符合 React Router 的设计理念。如果无法访问路由配置，可以考虑参数替换方法，但要注意其局限性。

选择合适的方法取决于您的具体需求和项目架构，在大多数情况下，维护一个中心化的路由配置是最佳实践。

相关文章

在 React Router v6 中获取当前路由的路径模式 ​

问题描述 ​

解决方案 ​

方法一：使用 matchRoutes（推荐） ​

方法二：使用路由参数替换 ​

方法三：使用内部 RouteContext（高级用法） ​

完整示例 ​

注意事项 ​

结论 ​