未捕获的类型错误：无法读取未定义的属性（读取“参数”）反应

Question

我正在创建一个带有反应的电子商务。 我正在尝试创建一个显示产品详细信息的 function。 但我不知道如何解决这个问题。 在浏览器中链接到详情的 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

Answer 1

1-) 在您的 class 开头添加以下代码行：

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

2-) 然后将此 function 添加到您的 class 上方（准确复制）：

 export function withRouter(Children){
 return(props)=>{

    const match  = {params: useParams()};
    return <Children {...props}  match = {match}/>
  }
 }

3-) 接下来，将您的 class 定义更改为：

class EditExercises extends Component{

4-) 在您的 class 末尾添加以下代码行：

export default withRouter(EditExercises);