白屏反应

Question

当我在我的反应路由器中使用params时，屏幕是白色的：

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;

注意:当我使用组件(带或不带params)而不是元素时，我也有白色的屏幕。

ProductDetailsPage.jsx：

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

当我删除匹配，我的页面加载正确！

Answer 1

与使用match不同，您可以使用react-router-dom中的useParams hook来访问product，如下所示：

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

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

我在functional component中使用过这个，但您也可以在class component中使用它。

还有一件事，如果这也不起作用，那么我认为您有一个问题，因为您的product在您的path中有两(2)次，但我不确定。