CODEWITHSUNDEEP
reactjsreact-router
yusef7884
yusef7884

Reputation: 57

Cannot read properties of undefined pathname in React

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

Upvotes: 1

Views: 273

Answers (3)

Drew Reese
Drew Reese

Reputation: 202667

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@5 Router requires a history prop.
  • react-router-dom@6 Router requires location and navigator props.

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

Edit cannot-read-properties-of-undefined-pathname-in-react

Upvotes: 0

Vida Hedayati
Vida Hedayati

Reputation: 336

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

Upvotes: 1

yusef7884
yusef7884

Reputation: 57

Cannot read properties of undefined (reading 'pathname')

Upvotes: 0

Related Questions