React Router中如何正确传递和接收路由参数？

A. 文阁提问于 2026-03-13 15:51:19 阅读 53

前端

我在用React Router v6做项目时，想从一个页面跳转到详情页并传个id过去，但接收的时候一直拿不到。我试过用useParams，但打印出来是空对象，不知道哪里出错了。

我的路由配置和跳转代码大概是这样的：

// 路由定义
<Route path="/detail/:id" element={<DetailPage />} />

// 跳转处
navigate('/detail/123');

// DetailPage组件里
const { id } = useParams();
console.log(id); // 输出 undefined

Redux 组件设计

我来解答赞 10 收藏

反馈

2 条解答

程序员建利 Lv1

看起来你的路由定义和跳转代码都没问题，但有个地方需要注意。在React Router v6里，useParams的使用需要保证组件是被路由渲染的，而不是直接通过父组件传入。

首先检查一下你的路由配置是不是放在了 Routes 里面，标准写法应该这样：

import { Routes, Route } from 'react-router-dom';



function App() {

  return (

    <Routes>

      <Route path="/detail/:id" element={<DetailPage />} />

    </Routes>

  );

}

其次，在 DetailPage 组件里用 useParams 的时候，确保你导入的是 react-router-dom 里的 useParams：

import { useParams } from 'react-router-dom';



function DetailPage() {

  const { id } = useParams();

  console.log(id);

  // 其他逻辑

}

记得检查路径是否正确匹配，有时候小问题就是卡在这儿。我自己也遇到过类似的情况，折腾半天才发现是个小细节没注意。试试看这样调整，应该就能拿到参数了。

2026-03-26 04:00

Air-锡丹 Lv1

问题很可能是你没用Routes包裹你的Route。

改成这样：

// 正确写法

<Routes>

  <Route path="/detail/:id" element={<DetailPage />} />

</Routes>



// DetailPage里

const { id } = useParams();

如果你用了BrowserRouter，它只负责路由导航，但参数解析必须包在Routes里。

2026-03-13 16:02