White Screen in react

Question

White Screen When I use params in my react router:

AppRouter.js:

import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
class AppRoute extends Component {
  render() {
    return(
          <Routes>
            <Route exact path="/product/show/:product" element={<ProductDetailsPage/>} />
          </Routes>
    ) 
  }
}

export default AppRoute;

Attention: When I use component(with or without params) instead of element I have white screen too

ProductDetailsPage.jsx :

    class ProductDetailsPage extends Component {
    
      constructor({match}){
        super();
        this.state = {
            product: match.params.product,
            products: []
          }
      }
.
.
.
.
    }
    
    export default ProductDetailsPage;

when I delete match, my page load correctly!

You aren't passing any props to the `ProductDetailsPage` page so `match` is undefined and is very likely throwing an error when it attempts to further access `match.params`. — Drew Reese, Mar 09 '22 at 08:09

score 0 · Answer 1 · answered Mar 09 '22 at 07:52

Instead of using match you can use useParams hook from react-router-dom to access product like below:

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

 const ProductDetails = () => {
     const {product} = useParams()
 }

I've used this in functional component but you can also use it in class component.

And one more thing if this doesn't work either then I think you are having a problem because you have product two(2) times in your path but I'm not sure about this.

White Screen in react

1 Answers1