React项目中使用match.params.id获取URL产品ID报错：Cannot read property 'params' of undefined

看起来你遇到的核心问题是React Router没有把路由相关的match、location等props传递给你的UploadImages组件，导致你访问match.params.id时出现错误。我来帮你分析并给出两种可行的解决方案：

问题原因 #

在React Router v5中，只有当你通过component属性或者render属性挂载组件时，路由才会自动将match、location、history这些props注入到组件中。而你当前的写法是直接把<UploadImages />放在<Route>标签内部，这种方式不会传递任何路由props，所以组件里的match自然是undefined。

解决方案1：修正Route的写法，传递路由props #

修改你App.js中的路由配置，将组件通过component属性传入：

<Router>
  <Switch>
    <Route 
      path={process.env.PUBLIC_URL +"/images/upload/:id"}
      component={UploadImages}
    />
  </Switch>
</Router>

或者使用render属性手动传递props（适合需要额外传参的场景）：

<Router>
  <Switch>
    <Route 
      path={process.env.PUBLIC_URL +"/images/upload/:id"}
      render={(props) => <UploadImages {...props} />}
    />
  </Switch>
</Router>

这样修改后，你的UploadImages组件就能正常接收到match props了，原来的const productID = match.params.id（或者更安全的match?.params?.id）就能正常工作。

解决方案2：使用useParams钩子（推荐） #

如果你使用的是React Router v5.1+，推荐直接使用Hooks的方式获取URL参数，这种方式不需要依赖组件props，代码更简洁：

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

function UploadImages() {
  // 直接从URL中解构出id参数
  const { id } = useParams();
  const productID = id;
  
  return (<div></div>);
};
export default UploadImages

这种方式完全摆脱了对match props的依赖，是React Router官方推荐的现代写法。

额外建议：统一路径前缀 #

注意到你路由配置中使用了process.env.PUBLIC_URL，但跳转时的路径是直接写的/images/upload/${params.id}，为了避免部署到子目录时出现路径匹配问题，建议跳转时也加上前缀：

<LinkContainer to={`${process.env.PUBLIC_URL}/images/upload/${params.id}`}>
  <button className="btn btn-primary mr-2">Set Images</button>
</LinkContainer>

按照上面的方案修改后，你应该就能正常获取到URL中的产品ID了。

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