产品页面不显示产品图片和内容

Question

这是我的 ProductScreen.js 文件

import React from "react";
import { Link } from "react-router-dom";
import { Row, Col, Image, ListGroup, Card, Button } from "react-bootstrap";
import Rating from "../components/Rating";
import products from "../products";

const ProductScreen = ({ match }) => {
    const product = products.find(p => p._id === match.params.id);

    return (
        <>
            <Link className="btn btn-dark my-3" to="/">
                Go Back
            </Link>
            <Row>
                <Col md={6}>
                    <Image src={product.image} alt={product.name} />
                </Col>
                <Col md={3}></Col>
            </Row>
        </>
    );
};
export default ProductScreen;

这是我的 app.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
import ProductScreen from "./screens/ProductScreen";

const App = () => {
    return (
        <Router>
            <Header />
            <main className="py-3">
                <Container>
                    <Routes>
                        <Route exact path="/" element={<HomeScreen />} />
                        <Route path="product/${:id}" element={<ProductScreen />} />
                    </Routes>
                </Container>
            </main>
            <Footer />
        </Router>
    );
};

export default App;

可能我用错了Routes标签，因为在我看的视频课程中，老师没有使用它。但是我在新版本中使用它，所以没有标签就无法使用然后我在互联网上找到它并使用这个附加标签。任何人都请帮助我，我真的需要完成这个项目。当我运行此应用程序并单击任何产品时 /product/id 页面打开但未显示任何内容

Answer 1

试试这个代码：

<Route path="product/:id" element={<ProductScreen />} />

并在您的产品屏幕中尝试使用 useParams Hook 来获取参数

const {id} = useParams()
console.log(id); // check if you are getting value or not

const product = products.find(p => p._id === +id);
console.log(product) // check is there any product

Answer 2

问题

我看到至少 2 个问题和一个潜在的第 3 个问题经常使 react-router-dom 中的新开发者绊倒。

产品详细信息路由路径格式错误，未正确指定 id 参数。
ProductScreen 组件正在访问未定义的属性。没有道具被传递给 ProductScreen 所以 match 是未定义的，当试图进一步访问它以获得 params.
剩下的问题是所有路由参数将始终是字符串值，但有时（或经常）产品 ID 值是与将是数字类型进行比较。使用严格的相等性检查将失败。 5 === '5' // false.

解决方案

修复路由路径。

<Routes>
  <Route path="/" element={<HomeScreen />} />
  <Route path="product/:id" element={<ProductScreen />} /> // <-- remove template string "stuff"
</Routes>

使用 useParams 钩子访问路由参数。
使用类型安全比较。将所有内容转换为字符串并使用严格的相等性检查很容易。

请记住 Array.prototype.find can/does return undefined 未找到匹配项阵列。组件代码应该优雅地处理这个问题。

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

const ProductScreen = () => {
  const { id } = useParams(); // <-- id is string
  const product = products.find(p => String(p._id) === id); // <-- convert `p._id` to string

  return (
    <>
      <Link className="btn btn-dark my-3" to="/">
        Go Back
      </Link>
      {product
        ? (
          <Row>
            <Col md={6}>
              <Image src={product.image} alt={product.name} />
            </Col>
            <Col md={3}></Col>
          </Row>
        )
        : <p>Sorry, no match found.</p>
      }
    </>
  );
};

产品页面不显示产品图片和内容

Product page do not show products image and contents

web-site-project

reactjs

react-router

react-router-dom

问题

解决方案