如何在父组件中捕获React Router动态路由参数？

不需要子组件传参，React Router本身提供了直接读取路由参数的能力，常用方案有两种：

• 方案1：将父组件作为嵌套路由的布局组件（推荐）
  只要父组件和子路由共享/project/:id这段路径前缀，父组件内直接调用useParams()就能拿到id参数，路由配置和代码写法如下：

  // 路由配置
  <Route path="/project/:id" element={<Parent />}>
    <Route index element={<Child />} />
    // 该路径下的其他子路由也可以直接读取同一个id参数
  </Route>
  

  import { useParams, Outlet } from 'react-router-dom';
  
  const Parent = () => {
    // 直接读取路由参数，无需子组件回传
    const { id: childId } = useParams();
  
    return (
      <div className="project-layout">
        <div>当前项目ID：{childId}</div>
        {/* Outlet 负责渲染匹配到的子路由内容 */}
        <Outlet />
      </div>
    )
  }
  

• 方案2：父组件在路由层级外时，用路径匹配钩子拿参数
  如果父组件是全局顶层组件（比如全局导航栏、通用布局），不方便做成嵌套路由的布局组件，可以用useMatch钩子匹配目标路径规则拿参数，获取到的参数会跟随路由跳转自动更新，不需要额外加监听逻辑：

  import { useMatch } from 'react-router-dom';
  
  const GlobalParent = () => {
    // 路径匹配规则和路由定义保持一致，未匹配到对应路径时返回null
    const routeMatch = useMatch('/project/:id');
    const childId = routeMatch?.params?.id;
  
    return (
      // 父组件业务逻辑
    )
  }
  

注意：路由参数属于路由全局状态，所有匹配到对应路径规则的组件都可以直接读取，不需要通过组件props/状态管理做跨层传递，子组件回传参数的方案会增加不必要的组件耦合，不推荐使用。

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