React Router DOM中如何正确引用路径参数修正路由配置错误？

原代码错误原因 #

你写的代码里id={":id"}传入的是固定字符串值:id，React Router 不会自动将路径占位符替换为实际匹配到的动态参数，因此组件永远拿不到真实的路径参数值。 #

修正方案（适用于React Router DOM v6，当前主流版本） #

路径参数不需要在路由配置时手动绑定传入，框架提供了标准的读取方式：

推荐写法：组件内通过Hook读取参数 #

1. 先简化路由配置，去掉手动传参的错误写法：

   <Route path="users" element={<Users />}>
     <Route path=":id" element={<UserProfile />} />
   </Route>
   

   注意：嵌套路由的父级路由对应的组件中，必须引入Outlet组件作为子路由内容的渲染出口，否则子路由内容不会显示：

   import { Outlet } from 'react-router-dom';
   function Users() {
     return (
       <div>
         <h2>用户模块</h2>
         {/* 子路由匹配到的<UserProfile />会渲染在这里 */}
         <Outlet />
       </div>
     )
   }
   

2. 在UserProfile组件中，调用useParams Hook即可获取路径参数：

   import { useParams } from 'react-router-dom';
   
   function UserProfile() {
     // 解构得到的id就是路径上匹配到的实际参数值，比如访问/users/123时，id值为"123"
     const { id } = useParams();
     
     // 注意：useParams取到的参数默认都是字符串类型，如果需要数值类型要手动转换
     // const userId = Number(id);
   
     return <div>当前查看用户ID：{id}</div>
   }
   

特殊场景：必须通过props传入参数的写法 #

如果你的UserProfile组件是通用组件，要求必须通过props接收id值，不允许在组件内部调用路由Hook，可以加一层包装组件做参数中转：

// 包装组件负责读取路由参数，再传给业务组件
function UserProfileWrapper() {
  const { id } = useParams();
  return <UserProfile id={id} />
}

// 路由配置中使用包装组件
<Route path="users" element={<Users />}>
  <Route path=":id" element={<UserProfileWrapper />} />
</Route>

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture