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