React中Route包裹的子组件如何获取当前匹配的Route路径值

下面提供几种适配不同React Router版本、且优于直接使用location hook的实现方式：

方案1：手动传递路径Props（最推荐，全版本通用） #

直接在路由定义时将匹配路径作为参数传给MyComponent，逻辑最直观、无额外路由API依赖，也不会出现子路由路径干扰的问题：

// 可提前将路径定义为常量，避免修改时两处不同步
const BASE_PATHS = {
  POINT_AND_CLICK: '/pointandclick',
  DRAGGABLE_GAME: '/draggablegame'
}

// 路由定义部分
<Route path={BASE_PATHS.POINT_AND_CLICK}>
  <MyComponent basePath={BASE_PATHS.POINT_AND_CLICK} />
</Route>
<Route path={BASE_PATHS.DRAGGABLE_GAME}>
  <MyComponent basePath={BASE_PATHS.DRAGGABLE_GAME} />
</Route>

在MyComponent中直接取props使用即可：

function MyComponent({ basePath }) {
  // 子路由跳转、渲染逻辑直接使用basePath即可
  return (
    <div>
      {basePath === '/pointandclick' ? (
        <>
          <Route path={`${basePath}/game1`} element={<Game1 />} />
          <Route path={`${basePath}/game2`} element={<Game2 />} />
          <Route path={`${basePath}/game3`} element={<Game3 />} />
        </>
      ) : (
        <>
          <Route path={`${basePath}/drag1`} element={<Drag1 />} />
          <Route path={`${basePath}/drag2`} element={<Drag2 />} />
          <Route path={`${basePath}/drag3`} element={<Drag3 />} />
        </>
      )}
    </div>
  )
}

方案2：通过路由API获取匹配路径 #

React Router v5及更早版本 #

可以用Route的render属性注入match对象，直接拿到当前匹配的父路径：

<Route 
  path="/pointandclick" 
  render={({ match }) => <MyComponent match={match} />} 
/>
<Route 
  path="/draggablegame" 
  render={({ match }) => <MyComponent match={match} />} 
/>

组件内通过match.path即可拿到对应父路径。

React Router v6版本 #

可以使用useMatchHook匹配指定路径规则，无需手动传参：

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

function MyComponent() {
  const pointMatch = useMatch('/pointandclick')
  const dragMatch = useMatch('/draggablegame')
  const basePath = pointMatch ? '/pointandclick' : '/draggablegame'
  
  // 后续逻辑和方案1一致
}

和直接用location相比，useMatch会自动匹配路由规则，不需要手动截取路径前缀，避免子路由路径导致的判断错误。

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