我遇到了一个问题，无论我做了多少研究/谷歌搜索，我似乎都无法解决这个问题，过去 2 天我一直在处理这个错误，首先我尝试在线查找其他人可能遇到的答案，但我似乎无法弄清楚，所以现在我需要向更有经验的人询问我做错了什么，请查看我的错误和代码图片，看看你是否能发现一些我找不到的东西……隧道视野..

前端是 reactjs，后端是 node/express

当我打开主屏幕页面时，每个产品都从后端加载，没有问题，但是一旦我单击单个产品以尝试获取具有唯一 ID 的特定产品页面，初始骨架会在没有任何产品信息的情况下短暂加载，然后崩溃并出现以下错误

“未处理的拒绝（TypeError）：无法读取未定义的属性（读取‘params’）”

现在我已经尝试了不同的解决方案和解决方法，检查问题是否可能使用 react-router-dom（useParams）、后端服务器/api（获取请求并查找单个产品）或通过 axios 获取单个产品的前端，但由于我在使用 axios 获取所有产品时在 HomeScreen 页面上执行同样的事情，我无法弄清楚为什么它可能不适用于单个产品，我使用 useState 和 useEffect 从后端 api 获取单个产品。

这里是单个产品屏幕，至少是它的获取部分

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
import Rating from '../components/Rating'
import axios from 'axios'

const ProductScreen = ({ match }) => {
const [product, setProduct] = useState({})

useEffect(() => {
    const fetchProduct = async () => {
        const { data } = await axios.get(`/api/products/${match.params.id}`)
        setProduct(data)
    }

    fetchProduct()
}, [match])

服务器文件

const express = require('express')
const products = require('./data/products')

const app = express()

app.get('/', (req, res) => {
res.send('API is running...')
})

app.get('/api/products', (req, res) => {
res.json(products)
})

app.get('/api/products/:id', (req, res) => {
const product = products.find((p) => p._id === req.params.id)
res.json(product)
})

app.js 文件

   import React from 'react'
   import { BrowserRouter as Router, Route, Routes } from 'react- 
   router-dom'
   import { Container } from 'react-bootstrap'
   import Header from './components/Header'
   import Footer from './components/Footer'
   import HomeScreen from './pages/HomeScreen'
   import ProductScreen from './pages/ProductScreen'

   const App = () => {
   return (
   <Router>
   <Header />
        <main className='py-3'>
            <Container>
                <Routes>
                    <Route path='/' element={<HomeScreen />} exact />
                    <Route path='/product/:id' element={<ProductScreen />} />
                </Routes>
            </Container>
        </main>
        <Footer />
    </Router>
)
}

export default App

提前致谢