React将获取的数据从API传递到另一个组件

Question

我从API中提取了一些产品，并将它们显示在卡中。卡片上有一个更详细的链接，如果用户单击该链接，它会将用户带到所选的产品详细信息页面。我的productDetails页面路由正常，但我很难找到将获取的数据作为道具传递到productDetails页面的方法。

这是我目前拥有的：My 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" component={ProductDetails} />
              </Switch>
            </Router>
          </div>
        ))}
      </div>
    </div>
  );
}

export default FeaturedProduct;

我的产品详细信息页面：

import React from "react";
import FeaturedProduct from "./FeaturedProduct";

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

Answer 1

 //pass it this way
 <Switch>
   <Route 
   path="/productdetails" 
   render={() => (
   { <ProductDetails  product={product}/>})}/>
   />
  </Switch>

Answer 2

如果您使用的是v6，请将其作为带有props的元素传递；抱歉，我没有问是哪个版本。

<Switch>
<Route path="/productdetails"  element={<ProductDetails {...props} />}/>
</Switch>

如果版本v4/5使用渲染方法

<Route path="/productdetails" render={(props) => (
{ <ProductDetails {...props} />} )}/>

Answer 3

我还在学习，但这是我会做的：

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

====

在ProductDetails上，您可以分解道具：

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

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