如何在React独立组件中获取并使用URL参数？

嘿，刚接触React路由碰到这个问题很正常，我结合你的代码（看起来是React Router v5版本）给你两种实用的解决方法：

方法一：通过路由的render函数传递参数 #

你当前的路由定义里，render回调其实能接收路由相关的props，其中match.params就包含了你要的id。修改路由代码如下：

<Route path="/details/:id" render={(props) => <DishDetails id={props.match.params.id} />}/>

之后在DishDetails组件里，就能通过props拿到这个ID：

function DishDetails(props) {
  const dishId = props.id;
  // 这里就可以使用1023这个值了，比如请求对应菜品数据
  return <div>当前菜品ID：{dishId}</div>;
}

方法二：使用useParams钩子（更推荐） #

从React Router v5.1开始，官方提供了钩子函数来简化参数获取，你不需要修改路由，直接在组件里用useParams就行：
首先确保你的react-router-dom版本是v5.1及以上，然后在DishDetails组件中：

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

function DishDetails() {
  // 解构出id参数
  const { id } = useParams();
  // 注意：这里的id是字符串类型，如果需要数字可以转一下：const dishId = Number(id)
  return <div>当前菜品ID：{id}</div>;
}

如果你之后升级到React Router v6（现在很多项目用这个版本），用法略有不同，但核心还是用钩子：
路由定义要改成element属性：

<Route path="/details/:id" element={<DishDetails />} />

组件里依然用useParams，用法和上面一样，非常方便。

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