Match.params.id 不显示任何内容

Question

import React, { useEffect} from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector} from 'react-redux'
import { Row, Col, Image, ListGroup, Card, Button, ListGroupItem} from 'react-bootstrap'
import Rating from '../components/Rating'
import Message from '../components/Message'
import Loader from '../components/Loader'
import { listProductDetails } from '../actions/productActions'
const ProductScreen = ({ match }) => {
const dispatch = useDispatch()
const productDetails = useSelector(state => state.productDetails)
const { loading, error, product} = productDetails

useEffect(() => {
dispatch(listProductDetails(match.params.id))
}, [dispatch,match])
}

//Match.params.id抛出一个错误，但没有显示任何内容。你有解决这个问题的办法吗？

Answer 1

import React, { useEffect} from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector} from 'react-redux'
import { Row, Col, Image, ListGroup, Card, Button, ListGroupItem} from 
'react-bootstrap'
import { useParams } from 'react-router-dom';
import Rating from '../components/Rating'
import Message from '../components/Message'
import Loader from '../components/Loader'
import { listProductDetails } from '../actions/productActions'
const ProductScreen = ({ match }) => {
const dispatch = useDispatch()
const { id } = useParams();
const productDetails = useSelector(state => state.productDetails)
const { loading, error, product} = productDetails

useEffect(() => {
dispatch(listProductDetails(id))//use id insted of match.params.id
}, [dispatch,match])
}

return(
<div className="ProductDetails">
<div>
<Carousel>
{product.images &&
product.images.map((item, i) => (
<img
className="CarouselImage"
key={i}
src={item.url}
alt={`${i} Slide`}
/>
))}
</Carousel>
</div>
</div>
);