我正在使用 react 创建一个电子商务。我正在尝试创建一个显示产品详细信息的函数。但我不知道如何解决这个问题。在浏览器中链接到详细信息的 url 后，url 是正确的，但详细信息不是渲染器并收到以下消息：

ProductDetails.js:22 Uncaught TypeError：无法读取未定义的属性（读取“params”）

在这里您可以阅读 ProductDetails.js 和 App.js 文件。 这是我的 react-router-dom 版本 v6.4.1

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Header from './components/layout/Header';
import Footer from './components/layout/Footer';
import Home from './components/layout/Home'
import './App.css';
import ProductDetails from './components/product/ProductDetails';

    function App() {
      return( 
        <>
        <Header/>
        <Footer/>
        <Routes>
         
        <Route path='/' element={<Home/>} />
        <Route path='/product/:id' element={<ProductDetails/>} />
    
        <Route/>
      </Routes>
      </>
        )
    }
    
    export default App;



import React, {useEffect, Fragment} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getProductDetails, clearErrors } from '../../actions/productActions';
import { useAlert } from 'react-alert';
import Loader from '../layout/Loader';
import MetaData from '../layout/MetaData';


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])

  return (
    <Fragment>
    {loading ? <Loader/> : (
        <Fragment>
            
        <div className="row f-flex justify-content-around">
            <div className="col-12 col-lg-5 img-fluid" id="product_image">
                <img src="https://i5.walmartimages.com/asr/1223a935-2a61-480a-95a1-21904ff8986c_1.17fa3d7870e3d9b1248da7b1144787f5.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff" alt="sdf" height="500" width="500"/>
            </div>

            <div className="col-12 col-lg-5 mt-5">
                <h3>"{product.name}</h3>
                <p id="product_id">Product # sklfjdk35fsdf5090</p>

                <hr/>

                <div className="rating-outer">
                    <div className="rating-inner"></div>
                </div>
                <span id="no_of_reviews">(5 Reviews)</span>

                <hr/>

                <p id="product_price">$108.00</p>
                <div className="stockCounter d-inline">
                    <span className="btn btn-danger minus">-</span>

                    <input type="number" className="form-control count d-inline" value="1" readOnly />

                    <span className="btn btn-primary plus">+</span>
                </div>
                 <button type="button" id="cart_btn" className="btn btn-primary d-inline ml-4">Add to Cart</button>

                <hr/>

                <p>Status: <span id="stock_status">In Stock</span></p>

                <hr/>

                <h4 className="mt-2">Description:</h4>
                <p>Binge on movies and TV episodes, news, sports, music and more! We insisted on 720p High Definition for this 32" LED TV, bringing out more lifelike color, texture and detail. We also partnered with Roku to bring you the best possible content with thousands of channels to choose from, conveniently presented through your own custom home screen.</p>
                <hr/>
                <p id="product_seller mb-3">Sold by: <strong>Amazon</strong></p>
                
                <button id="review_btn" type="button" className="btn btn-primary mt-4" data-toggle="modal" data-target="#ratingModal">
                            Submit Your Review
                </button>
                
                <div className="row mt-2 mb-5">
                    <div className="rating w-50">

                        <div className="modal fade" id="ratingModal" tabIndex="-1" role="dialog" aria-labelledby="ratingModalLabel" aria-hidden="true">
                            <div className="modal-dialog" role="document">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <h5 className="modal-title" id="ratingModalLabel">Submit Review</h5>
                                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div className="modal-body">

                                        <ul className="stars" >
                                            <li className="star"><i className="fa fa-star"></i></li>
                                            <li className="star"><i className="fa fa-star"></i></li>
                                            <li className="star"><i className="fa fa-star"></i></li>
                                            <li className="star"><i className="fa fa-star"></i></li>
                                            <li className="star"><i className="fa fa-star"></i></li>
                                        </ul>

                                        <textarea name="review" id="review" className="form-control mt-3">

                                        </textarea>

                                        <button className="btn my-3 float-right review-btn px-4 text-white" data-dismiss="modal" aria-label="Close">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                        
            </div>

        </div>
        </div>
        </Fragment>
    )}
    </Fragment>
    
  )
}

export default ProductDetails