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

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>
  );
}

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

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;

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

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; 

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

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

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

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()
 },[]);

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

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={} >