React中传递路由参数到页面 useParams获取ID为undefined如何解决

问题排查及解决方法 #

1. 未在路由规则中声明动态参数（最常见原因） #

React Router 要求动态参数必须在路由定义时通过:参数名的格式显式声明，参数名需要和你在useParams中解构的变量名完全一致。
你需要找到你的路由配置代码，修改详情页路由的path属性：

// react-router-dom v6 示例
import { Routes, Route } from 'react-router-dom';
import CarDetails from './Cars/Sales/details';

<Routes>
  {/* 必须添加:id作为动态参数占位符，和useParams解构的id对应 */}
  <Route path="/Cars/Sales/details/:id" element={<CarDetails />} />
</Routes>

如果是v5版本，修改方式同理，将路由path改为/Cars/Sales/details/:id即可。

2. Link的to属性存在语法及路径错误 #

你的原代码中模板字符串首尾符号不匹配（左反引号、右单引号），且路径没有开头斜杠会触发相对路径计算，可能跳转的实际路径不符合预期，修正后的Link写法：

<ul>
  {cars.map((data) => (
    <li key={data.CarId}>
      <Link to={`/Cars/Sales/details/${data.CarSalesId}`}>Details</Link>
    </li>
  ))}
</ul>

3. 额外校验点 #

确认你整个应用外层已经包裹了BrowserRouter（或者HashRouter）组件，这是React Router所有路由能力生效的基础。
完成上述修改后，在详情页通过useParams()就能正常拿到id参数。

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