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

December 2, 2022 XpertPhp

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

  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;

Please follow and like us:

Related posts: