React – TypeError: Cannot read properties of undefined (reading ‘params’)

by

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

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  10. Invariant failed: You should not use outside a
  11. useNavigate() may be used only in the context of a component
  12. React Router Dom v6 shows active for index as well as other subroutes
  13. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  14. react app showing empty page when redirecting on production build
  15. React App goes blank after importing React-Router-Dom
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. React doesn’t reload component data on route param change or query change
  21. What is the best way to redirect a page using React Router? [closed]
  22. React Router Pass Param to Component
  23. How to stop /#/ in browser with react-router?
  24. React router v6 how to use `navigate` redirection in axios interceptor
  25. react-router-dom useParams() inside class component
  26. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  27. What is the alternative for Redirect in react-router-dom v 6.0.0?
  28. ‘withRouter’ is not exported from ‘react-router-dom’
  29. Pass object through Link in react router
  30. Automatic redirect after login with react-router

Leave a Comment