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

Hello guys, in this article, we will explain to you how to solve typeerror: Cannot Read Properties Of Undefined (Reading ‘Params’) in react. we will give you a simple example of how to solve Cannot Read Properties Of Undefined (Reading ‘Params’) in react.

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

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

export default App;

import { Container } from 'react-bootstrap';

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Product from './components/Product'

function App() {

return (

</Routes>

</Container>

</main>

</Router>

);

}

export default App;

In this above example script code, we pass the product id to child component. but some times it not working and it return the error TypeError: Cannot Read Properties Of Undefined (Reading ‘Params’) can be resolved.

In this below example, we fix that error using the params as useParams(). so you can see below example.

import { Link, useParams } from 'react-router-dom';
function Product() {
  const { id } = useParams();
  console.log(id); //output product id
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://xpertphp.com/react-get-url-params-in-class-component-with-examples/" target="_blank" rel="nofollow" class="u3d10a3319aeb3a0d844fbf49424881b4"><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">See also</span>  <span class="postTitle">React Get Url Params In Class Component With Examples</span></div></a></div>
  return (
    <div>
      <p>here show product id get using params</p>
    </div>
  );
}

export default Product;

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

function Product() {

const { id } = useParams();

console.log(id); //output product id

return (

<div>

<p>here show product id get using params</p>

</div>

);

}

export default Product;