我们如何将所选产品的id传递给react中的其他组件

Question

在我的网站，MainWidget.js包含所有类别的链接，如-衣服，电子产品，家居配件等....现在如果我点击衣服，这将渲染到product。js页面中提到的所有服装部分，我被困在这个页面，如果我选择了特定的项目，那么这应该呈现在ProductScreen.js当提到特定产品的细节时……那么我如何从product .js组件传递所选产品的Id到ProductScreen组件

App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Header from './components/Header';
import Main_WidgetPage from './components/Main_WidgetPage';
import Product from './components/Product';
import ProductScreen from './components/ProductScreen';
import data from './data';
function App() {
return (
<Router>
<div className="grid-container">
<Switch>

<Route path="/productScreen/:id">
<Header />
<ProductScreen/>
</Route>
<Route path="/product">
<Header />
<Product />
</Route>
<Route path="/">
<Header />
<Main_WidgetPage />
</Route>
</Switch>

</div>
</Router>

);
}
export default App;

MainWidget.js

<div className="card_container1">
<div className="card">
<Link to="/product">
<h1> Link to PRODUCT.JS Clothing Section
</h1>
</Link>
</div>
<div className="card">
<Link to="/product">
<h1> Link to PRODUCT.JS
</h1>
</Link>
</div>
<div className="card">
<Link to="/product">
<h1> Link to PRODUCT.JS
</h1>
</Link>
</div>
</div>

Product.js

function Product() {
return (
<div className="product">
<div className="row center">
{/* fetching data from data.js using map func */}
{/* data - file name; products -array name */}
<Link to="/productScreen?id='**I want to pass the id of the selcted product** '">

{
data.products.map(product=>(
<div key={product._id} className="card card-deck">
<div className="product_image">
<a href={`/product/${product._id}`}>
<img className="image" src={product.image} alt={product.name} style={{textAlign:"center"}}/>
</a>
</div>
<div className="product_detail">
<a href={`/product/${product._id}`}>
<h4>{product.brand}</h4>
<p>{product.description}</p>
</a>
<div className="product_rating_Page">
<Rating rating={product.rating} numReviews={product.numReviews}/>

ProductScreen.js

function ProductScreen({props}) {
const product = data.products.find(x => x._id === props.match.params.id);
console.log(product);
if(!product){
return <div>Product Not Found</div>
}
// const product=data.products;
return (
<div className="productScreen">
<div className="row">
<div className="col-2">
<img className="large" src={product.image} alt={product.name}/>
</div>
<div className="col-1">
<ul>
<li>
<h1>{product.brand}</h1>
</li>
<li>
<Rating rating={product.rating} numReviews={product.numReviews}/>
</li>
<li>
<CurrencyFormat
renderText={(value) => (
<h5>{value}</h5>
)}
decimalScale={2}
value={product.price}
displayType={"text"}
thousandSeparator={true}
prefix={"$"}
/>
</li>
<li>
<p>{product.description}</p>
</li>
</ul>
</div>

Answer 1

在你的路由中，你可以像下面这样用URL传递routeParams。

<Route
path="/product/:id"
component={ProductPage}
exact={true}
/>

将<Link>放入data.products.map(product=>()中，并将产品id传递给链接。

<Link to=`/productScreen/${product_id}`>

在您的ProductScreen.js文件中，您可以使用以下代码

访问产品id

// make sure you import the useParam
import { useParams } from "react-router";
// use this to access the id from the route params
const params = useParams<RouteParam>();
console.log(params.id);