import React from 'react'
import { Card } from 'react-bootstrap'
import { Link } from 'react-router-dom'
const Product = ({ product }) => {
return (
<div>
<Card className='my-3 p-3 rounded'>
<Link to={`/product/${product._id}`} >
<Card.Img src={product.image} variant="top"/>
</Link>
</Card>
<Card.Body>
<Link to={`/product/${product._id}`}>
<Card.Title as="div">{product.name}</Card.Title>
</Link>
</Card.Body>
<Card.Text as="h3">{product.price}</Card.Text>
</div>
)
}
export default Product
-
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.Community– Community Bot2022-02-27 07:36:51 +00:00Commented Feb 27, 2022 at 7:36
Add a comment
|
3 Answers
<Link to={`/product/${product?._id}`} >
<Card.Img src={product?.image} variant="top"/>
</Link>
//some code
<Link to={`/product/${product?._id}`}>
<Card.Title as="div">{product?.name}</Card.Title>
</Link>
Comments
Cannot read properties of undefined (reading 'pathname')
Comments
The only way I can reproduce this specific error, in either of react-router-dom v5 and v6, is to use the low-level Router component without passing the appropriate required props.
react-router-dom@5Routerrequires ahistoryprop.react-router-dom@6Routerrequireslocationandnavigatorprops.
Either provide the appropriate props or use the appropriate high-level routers, i.e. BrowserRouter, MemoryRouter, HashRouter, etc...
Example, import the BrowserRouter and rename to Router so the exited code works as expected.
import { BrowserRouter as Router } from "react-router-dom";
