React电商项目单商品页报Cannot read property 'params' of undefined求助

你遇到的TypeError: Cannot read property 'params' of undefined报错有多个关联问题，按以下步骤修复即可：

1. 路由配置错误修复 #

情况A：使用react-router-dom v5版本 #

• 你的App.js中没有用BrowserRouter包裹路由规则，同时Route组件传递props的方式错误，无法自动给子组件注入match对象。修改App.js代码如下：

import React from 'react';
import{Route,BrowserRouter, Switch } from "react-router-dom"
import './App.css';
import ProductDetails from './screens/ProductDetails' 
const  App=() =>{
  return (
   <BrowserRouter>
    <Switch>
      {/* 用component属性指定组件，自动注入路由相关props */}
      <Route path="/product/:id" component={ProductDetails} />
    </Switch>
   </BrowserRouter>
  );
}
export default App;

情况B：使用react-router-dom v6版本（当前主流版本） #

v6已经移除了组件自动注入的match属性，需要用useParams钩子获取路由参数，同时路由配置规则也有变化，分两步修改：
首先修改App.js：

import React from 'react';
import{Route,BrowserRouter, Routes } from "react-router-dom"
import './App.css';
import ProductDetails from './screens/ProductDetails' 
const  App=() =>{
  return (
   <BrowserRouter>
    <Routes>
      <Route path="/product/:id" element={<ProductDetails/>} />
    </Routes>
   </BrowserRouter>
  );
}
export default App;

然后修改ProductDetails组件代码，用useParams获取id：

import React from 'react'
// 导入useParams钩子
import { useParams } from 'react-router-dom'
import products from '../product' // 导入名和导出的products对应，避免歧义
import {Row,Col,ListGroup,Button,Image}from 'react-bootstrap'

const ProductDetails = () => {
    // 获取路由参数id
    const { id } = useParams()
    const product=products.find((p)=>p._id === id)
    return (
        <div>
       <Row>
           <Col md={6} >
        {/* 商品字段是images，不是image，对应修正 */}
        <Image src={product.images} alt={product.name} fluid />
           </Col>
       </Row> 
        </div>
    )
}

export default ProductDetails

2. 其他隐藏问题修复 #

• 导入商品数组的时候命名不匹配：product.js导出的是products数组，之前ProductDetails里导入为Product，虽然语法没问题但容易出错，建议统一命名。
• 商品对象的图片字段是images，之前代码里写的是product.image，少了个s，会导致图片加载失败，上面的修复代码已经做了更正。

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