React路由传值疑问：定义可选参数后params.id返回undefined

嘿，我来帮你搞定这个问题～你之所以拿不到id，核心是混淆了两种不同的路由传参方式：

问题根源 #

你的路由配置Route path="/about-cards/:id?" component={AboutCards}定义的是路径参数（/:id?里的id是URL路径的一部分），但你访问的URL用的是查询参数（?id=1这种带问号的键值对），这俩不是一回事，所以this.props.match.params.id自然会返回undefined。

下面给你两种对应的解决方案，你可以根据需求选：

方案1：用路径参数（匹配你的路由配置） #

如果你想沿用当前的路由配置，只需要修改访问的URL：
把http://localhost:3000/about-cards?id=1改成 http://localhost:3000/about-cards/1

之后在AboutCards的componentDidMount里，就能正常通过this.props.match.params.id拿到1了。

路由里的?表示这个id参数是可选的，所以访问/about-cards时，this.props.match.params.id会是undefined，这是符合预期的。

方案2：用查询参数（保持你当前的访问URL） #

如果你想继续用?id=1这种查询参数的方式，那获取方式要调整：
在componentDidMount里通过location.search解析查询字符串：

componentDidMount() {
  // 解析查询参数
  const searchParams = new URLSearchParams(this.props.location.search);
  const id = searchParams.get('id');
  console.log(id); // 这里就能输出1啦
}

注意：如果你的项目用的是React Router v6+，类组件需要用withRouter高阶组件包裹，才能拿到this.props.location；如果是v5及以下，直接用this.props.location就没问题。

小总结 #

• 路径参数（/about-cards/1）适合表示资源的唯一标识，URL结构更清晰RESTful；
• 查询参数（/about-cards?id=1）适合传递可选的过滤、分页等非核心参数。

内容的提问来源于stack exchange，提问作者S.M_Emamian