react函数组件中如何拿到路由路径中传的id

要在 React 函数组件中获取路由路径中传递的 id，需要使用 React Router 提供的 `useParams` 钩子函数。首先需要在组件中引入 `useParams`：

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

然后在组件中使用 `useParams` 获取路由参数：

function MyComponent() {
  const { id } = useParams();

  // 在组件中可以使用 id 来进行相应的操作
  // ...
}

其中，`id` 对应的是路由路径中传递的参数名称，例如路由路径为 `"/users/:id"`，则可以通过 `useParams` 获取到 `id` 参数的值。

相关问题

react 函数组建获取路由参数

在React中，函数组件获取路由参数可以通过使用react-router-dom提供的useParams钩子函数来实现。
首先，我们需要在组件中导入useParams函数：

import { useParams } from 'react-router-dom';
然后，在组件内部使用useParams函数来获取路由参数。例如，如果我们的路由路径定义为"/users/:id"，那么我们可以通过下面的方式获取id参数：

const UserDetail = () => {
const { id } = useParams();

return (
<div>
<h1>User Detail</h1>
<p>User ID: {id}</p>
</div>
);
};
在上面的例子中，我们通过{ id } = useParams()语法从useParams函数返回的对象中解构出id参数的值。然后我们可以在组件中使用这个id参数来展示用户详情信息。

需要注意的是，为了能够正常使用useParams函数，我们必须确保在组件所在的路由路径中包含了对应的参数。否则，useParams函数返回的对象将为空。所以，使用useParams之前，请确保路由路径和参数的设置正确。

希望以上的解答能够帮助到你！