Cannot read properties of undefined pathname in React-CodePudding

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

CodePudding user response：

Cannot read properties of undefined (reading 'pathname')

CodePudding user response：

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