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

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

前端

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

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

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

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

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

Redux 组件设计

我来解答赞 2 收藏

反馈

1 条解答

Air-锡丹 Lv1

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

改成这样：

// 正确写法

<Routes>

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

</Routes>



// DetailPage里

const { id } = useParams();

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

2026-03-13 16:02