从产品页面到特定产品详细信息页面的反应路线

Question

我有一个产品页面，如果用户点击特定的产品卡片，它会将用户重定向到一个新页面，该页面将仅显示该特定产品的详细信息。 但是，在我的代码中，即使将其重定向到详细信息页面后，它仍然会在该页面上显示整个产品列表。 我需要一些帮助来解决这个问题。 我试过通过道具来区分。 但这似乎不起作用。 我的 FeaturedProduct.js：

import React from "react";
import { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import ProductDetails from "./ProductDetails";
import axios from "axios";

function FeaturedProduct(props) {
  const [products, setProducts] = useState([]);
 
  useEffect(() => {
    fetchProducts();
  }, []);

  function fetchProducts() {
    axios
      .get("https://shoppingapiacme.herokuapp.com/shopping") 
      .then((res) => {
        console.log(res); 
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  return (
    <div>
      <h1> Your Products List is shown below:</h1>
      <div className="item-container">
       
        {products.map((product) => (
          <div className="card" key={product.id}>
            {" "}
           
            <h3>{product.item}</h3>
            <p>
              {product.city}, {product.state}
            </p>
            <Router>
              <Link to="/productdetails">More Details</Link>

              <Switch>
                <Route path="/productdetails">
                <ProductDetails product={product}/>
                </Route>
              </Switch>
            </Router>
          </div>
        ))}
      </div>
    </div>
  );
}

export default FeaturedProduct;

我的 ProductDetails.js：

function ProductDetails(props) {
const {name, color} = props.product;

  return (
    <div>
      <div>
        <h1>{name}</h1>
        <h1>{color}</h1>
      </div>
    </div>
  );
}
export default  ProductDetails;

我的 App.js：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import FeaturedProduct from "./FeaturedProduct";

import "./App.css";

function App() {
  return (
    <div className="App">
      <FeaturedProduct />
    </div>
  );
}

export default App;

Answer 1

问题

您正在为每个映射的产品元素呈现相同的路由器/链接/路线。

<Router>
  <Link to="/productdetails">More Details</Link>

  <Switch>
    <Route path="/productdetails">
      <ProductDetails product={product}/>
    </Route>
  </Switch>
</Router>

这意味着当路径为“/productdetails”时，您会为它们中的每一个呈现一个Route和ProductDetails组件。

一个解法

更常见的是为产品详细信息页面呈现单个Router和Route ，并将特定产品id作为路由参数，或者在路由 state 中传递整个产品 object（尽管不太常见）。

将Router移动到App中以向应用程序提供单个路由上下文：

function App() {
  return (
    <Router>
      <div className="App">
        <FeaturedProduct />
      </div>
    </Router>
  );
}

将Switch和Route移到products映射下方，只留下 map 回调中的Link 。 链接到特定的产品id并使用Route的render prop 通过id搜索匹配的产品以作为 prop 传入：

function FeaturedProduct(props) {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  function fetchProducts() {
    axios
      .get("https://shoppingapiacme.herokuapp.com/shopping")
      .then((res) => {
        console.log(res);
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  return (
    <div>
      <h1> Your Products List is shown below:</h1>
      <div className="item-container">
        {products.map((product) => (
          <div className="card" key={product.id}>
            <h3>{product.item}</h3>
            <p>
              {product.city}, {product.state}
            </p>
            <Link to={`/product/${product.id}`}>More Details</Link>
          </div>
        ))}
      </div>
      <Switch>
        <Route
          path="/product/:id"
          render={({ match }) => (
            <ProductDetails
              product={products.find(
                (product) => String(product.id) === match.params.id
              )}
            />
          )}
        />
      </Switch>
    </div>
  );
}