我确信我将要退出的教程已经过时了。我遇到了这个错误ProductDetails.js:27

Uncaught TypeError: Cannot read properties of undefined (reading 'params')

这是我的代码，其中ProductDetails.js:27是分派、警报、错误，match.params.id:

import React, { Fragment, useEffect } from 'react'
            import { Carousel } from 'react-bootstrap'
            
            import Loader from '../layout/Loader'
            import MetaData from '../layout/MetaData'
            
            import { useAlert } from 'react-alert'
            import { useDispatch, useSelector } from 'react-redux'
            import { getProductDetails, clearErrors } from '../../actions/productActions'
            
            const ProductDetails = ({ match }) => {
            
                const dispatch = useDispatch();
                const alert = useAlert();
            
                const { loading, error, product } = useSelector(state => state.productDetails)
            
                useEffect(() => {
                    dispatch(getProductDetails(match.params.id))
                
                    if(error) {
                        alert.error(error);
                        dispatch(clearErrors())
                    }
                
                }, [dispatch, alert, error, match.params.id])
            
            
            
            export default ProductDetails

不知道ProductDetails.js代码有多少，但它在这里，我省略了我的返回函数，因为它说我的帖子主要是代码。下面也是我的App.js代码：

import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
    
    import Header from './components/layout/Header'
    import Footer from './components/layout/Footer'
    
    import Home from './components/Home'
    import ProductDetails from './components/product/ProductDetails'
    
    function App() {
      return (
        <Router>
          <div className="App">
            <Header />
            <div className="container container-fluid">
             <Routes>
              <Route path="/" element={<Home /> } exact />
              <Route path="/product/:id" element={<ProductDetails /> } exact />
             </Routes>
            </div>
            <Footer />
          </div>
        </Router>
      );
    }
    
    export default App;