React - TypeError: Cannot read properties of undefined (reading 'params')

Question

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params')

TypeError: Cannot read properties of undefined (reading 'params')
       5 | import products from '../products'
       6 | 
       7 | function ProductScreen({ match }) {
       8 |     const product = products.find((p) => p._id == match.params.id)
       9 |     return (
      10 |         <div>
      11 |             {product.name}

This is my ProductScreen.js file where is causing an issue

import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'

function ProductScreen({ match }) {
    const product = products.find((p) => p._id == match.params.id)
    return (
        <div>
            {product.name}
        </div>
    )
}

export default ProductScreen

and my App.js

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'

import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'

function App() {
  return (
    <Router>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            <Route path='/' element={<HomeScreen/>} exact />
            <Route path='/product/:id' element={<ProductScreen/>} />
          </Routes>
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

I also tried to change match.params.id to Number or ParseInt (match.params) and still gave me an error...

I know this is very simple but I'm stuck here and cannot go further... Any help would be appreciated!

One more question - Inside App.js, where Route is, in the tutorial was using components={} attribute instead of element={}. And when I tried the same it gave me an error, so I had to fix it another way. Do you know why it caused an error?

From the tutorial

<Route path='/' component={HomeScreen} exact />

My fix --

<Route path='/' element={<HomeScreen/>} exact />

Drew Reese · Accepted Answer · 2022-09-18 06:20:19Z

25

The tutorial appears to be older and using react-router-dom version 5 whereas you are using version 6. In version 6 there were many breaking API changes. The Route components no longer use component or render props, the element prop that is passed a valid JSX literal replaced them. route props (history, location, and match) also no longer exist, the routed components must use the React hooks to access them now.

Routes and Route

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string;
}

Given route: <Route path='/product/:id' element={<ProductScreen/>} />

Use the useParams hook to access the id match param. The match param will be a string, so if your product ids are a number type, then to ensure strict equality convert the _id property to a string to use a type-safe comparison. Don't forget that Array.prototype.find returns undefined if no match is found, so the code should check the result value prior to attempting to access into it for properties when rendering.

import { Link, useParams } from 'react-router-dom';
...

function ProductScreen() {
  const { id } = useParams();
  const product = products.find((p) => String(p._id) === id);

  if (!product) return null; // or fallback UI

  return (
    <div>
      {product.name}
    </div>
  );
}

edited Sep 18, 2022 at 6:20

answered Dec 9, 2021 at 17:14

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fazle Rabbi Ador Over a year ago

@Reese When using Number(id) it didn't work for me. without that, it's working.

Drew Reese Over a year ago

@FazleRabbiAdor Seems like your id values are strings (as they probably should be) and not of type Number. It all depends on your data properties and their types. The route params will always be a string by default though, so sometimes conversion is necessary for strict equality (===) checks.

Syscall · Accepted Answer · 2022-01-16 14:22:40Z

10

I had the same problem, finally, this code worked.

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

const { id } = useParams();

const product = products.find((p) => p._id === (id));

 <Route path="/product/:id" element={<ProductDetails />} />

edited Jan 16, 2022 at 14:22

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Jan 16, 2022 at 12:43

Sachin Pradhan

1012 bronze badges

Comments

antoniodenaro · Accepted Answer · 2022-04-26 22:49:06Z

3

import { Link, useParams } from "react-router-dom";
    ...
    
    function ProductScreen() {
      const { id } = useParams();
      const product = products.find((p) => p._id === id);
      return <div>{product.name}</div>;
    }
    
    export default ProductScreen;

answered Apr 26, 2022 at 22:49

antoniodenaro

311 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

kiri · Accepted Answer · 2021-12-09 20:58:46Z

2

import { Link, useParams } from 'react-router-dom';
...

function ProductScreen() {
  const { id } = useParams();
  const product = products.find((p) => p._id === Number(id));
  return (
    <div>
      {product.name}
    </div>
  );
}

This solved :)

answered Dec 9, 2021 at 20:58

kiri

1511 gold badge1 silver badge5 bronze badges

Comments

Terry Hunt · Accepted Answer · 2022-06-09 12:57:11Z

2

I know this has been marked solved but I'm doing this course on Udemy as well.

Here is my working solution in case someone needs help on this course. I used params as useParams()


import React from "react";
import { Link, useParams } from "react-router-dom";
import products from "../products";

const ProductScreen = () => {
  const params = useParams();
  const product = products.find((p) => p._id === params.id);
  return <div>{product.name}</div>;
};

export default ProductScreen;

answered Jun 9, 2022 at 12:57

Terry Hunt

398 bronze badges

1 Comment

blueblob26 Over a year ago

Glad you answered this 12 hours before I ran into the same issue in (probably) the same course. Thank you!

cxkeeley · Accepted Answer · 2022-06-25 13:46:55Z

2

For router 6 use this

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

const SingleProduct = () => {
  const { id } = useParams();
  const product = products.find(product => product._id === (id));
}

(id) without Number(id) or it will undefined

<div className='single-image'>
  <img src={product.image} alt={product.name} />
</div>

and add this in App.js

<Route path='/products/:id' element={<SingleProduct />} />

answered Jun 25, 2022 at 13:46

cxkeeley

3793 silver badges3 bronze badges

Comments

Md Afsar Uddin · Accepted Answer · 2022-03-29 11:26:53Z

1

**In App.js file:** 

<Route path="/products/:id" element={<SingleProduct />} />

**In SingleProduct.js file:** 

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

const SingleProduct = () => {

const { id } = useParams()
const product = products.find((p) => p._id === (id))

 <div>
      <img src={product.image} alt={product.name} />
      <h3>product.name</h3>
</div>
}
export default SingleProduct;


**This code worked in my case.**

answered Mar 29, 2022 at 11:26

Md Afsar Uddin

331 silver badge3 bronze badges

Comments

Samorinho · Accepted Answer · 2021-12-09 13:46:38Z

0

In the Router:

<Route path='/product/:id' element={ProductScreen} />

In the ProductScreen component:

import { useParams } from "react-router-dom";
...
const { id } = useParams();

https://v5.reactrouter.com/web/api/Hooks/useparams

answered Dec 9, 2021 at 13:46

Samorinho

93 bronze badges

Comments

sudeep Timsina · Accepted Answer · 2022-07-12 14:14:30Z

0

This code might be helpful for you. In this case

function ProductScreen() {
  const[product,setProduct]=useState([]);
  const { id } = useParams();

  useEffect(()=>{
    async function fetchProduct(){
         const {data}= await axios.get('/api/products/'+id)
         setProduct(data)
     }
     fetchProduct()
 },[]);

answered Jul 12, 2022 at 14:14

sudeep Timsina

11 bronze badge

Comments

Linus Yong · Accepted Answer · 2023-01-02 19:15:19Z

0

You have to put

const ProductView = () => {
  const params = useParams();
  const product = products.find((p) => p._id === params.id);
}

Dont' for get to import useParams in react-router-dom!

edited Jan 2, 2023 at 19:15

answered Jan 2, 2023 at 19:01

Linus Yong

11 bronze badge

Comments

Yuvraj Singh · Accepted Answer · 2023-01-13 04:19:38Z

0

I think in [email protected] vesrion it support the componant but in eairleir version react change policy and in [email protected] or more version componant is replaced by element.

But Now, You use [email protected] or highier version.

<Route path='/' element={} exact />

answered Jan 13, 2023 at 4:19

Yuvraj Singh

791 silver badge8 bronze badges

Comments

Himanshu Dadheech · Accepted Answer · 2022-03-22 19:04:05Z

-1

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

const { id } = useParams(); const product = products.find((p) => p._id === (id));

In app.js <Route path="/product/:id" element={} >

answered Mar 22, 2022 at 19:04

Himanshu Dadheech

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React - TypeError: Cannot read properties of undefined (reading 'params')

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params')

12 Answers 12

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

So I'm having an error message - TypeError: Cannot read properties of undefined (reading 'params')

12 Answers 12

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related