如何在反应中设置我的电子商务网站中单个产品页面的路线？路线 ID 未定义

Question

我正在创建一个电子商务网站，我想在其中为每个产品创建一个单独的产品页面。我在反应中使用了道具和地图来做到这一点。但主要问题是为每个 id 设置路由。我希望每当我点击任何产品时，它的产品页面都应该可见，它的 id 也应该显示在路线中。但路线是“http://localhost:5173/product/undefined”而不是“http://localhost:5173/product/1”我应该怎么做才能根据id获取产品页面。

我提供Product.jsx、ProductPage.jsx和App.jsx的完整代码。

以下是所有产品卡的页面代码，文件名为 Product.jsx:-

import detail from "./detail";
import { Link } from "react-router-dom";
import productData from "../../../ProductPage/productData";

import "./product.scss";

function Entry(props) {
  return (
    <>
      <Link to={`/product/${props.id}`} key={props.id} className="entry-container">
        <div className="entry-image">
          <img src={props.image} alt="Product Image" />
          <div className="entry-name">
            <p>{props.name}</p>
            <div className="entry-price">
              <p>{props.price}</p>
            </div>
          </div>
        </div>
      </Link>
    </>
  );
}

function Product(props) {

  return (
    <>
      <div className="product-entry">

        {detail.map((details) => (
          <Entry
            key={details.id}
            image={details.image}
            name={details.name}
            price={details.price}
            rating={details.rating}
          />
        ))}

        </div>

      <div className="flex justify-center">
        <button className="w-150 h-10 bg-red-700 text-white rounded-lg py-2 px-4 font-medium text-uppercase cursor-pointer hover:bg-red-900 focus:outline-none active:bg-green-800 mt-5">
          View All Products
        </button>
      </div>
    </>
  );
}

export default Product;

第二个代码块是每个产品的单独产品页面ProductPage.jsx:-

import "./productPage.scss";
import productData from "./productData";
import { useParams } from "react-router-dom";


function Page(props) {
  return (
    <>
      <div key={props.id} className="page-container">
        <div className="page-image">
          <img src={props.image} alt="Product Image" />
          <div className="page-name">
            <p>{props.name}</p>
            <div className="page-price">
              <p>{props.price}</p>
              <div className="page-rating">
                <p>{props.rating}</p>
              </div>
              <div className="page-detail">
                <p>{props.detail}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function ProductPage() {

    const { id } = useParams();
    console.log(id);

    const product = productData.find((product) => product.id === id);  

  return <>
    <div className="product-page">
        {product && (
          <Page
            key={product.id}
            image={product.image}
            name={product.name}
            price={product.price}
            rating={product.rating}
            detail={product.detail}
          />
        )}
        {!product && <p>Product not found.</p>}

        {console.log("Extracted ID from URL:", id)}
      </div>
  </>;
}

export default ProductPage;

** App.jsx代码：-**

import "./App.css";

import Navbar from "./components/Navbar/Navbar";
import Home from "./components/Home/Home";
import Footer from "./components/Footer/Footer";
import Signin from "./components/Signin/Signin";
import About from "./components/About/About";
import { Routes, Route } from "react-router-dom";
import Contact from "./components/Contact/Contact";
import ProductPage from "./components/ProductPage/ProductPage";
import Product from "./components/Home/Home_component/product/Product";

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Product />} />
        <Route path="/signin" element={<Signin />} />
        <Route path="/product/:id" element={<ProductPage />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
      <Footer />
    </>
  );
}

export default App;

我希望每个页面都应该根据其 id 有单独的产品页面路由。 请帮我解决这个问题。

Answer 1

路由“product/:id”的 api 输出是什么？