In my website, MainWidget.js contain all categories link like- CLOTHES ,ELECTRONICS,Home Accessories etc....Now if I click on Clothes ,this will render to the Product.js page where all clothing section in mention ,I'm stuck at this page ,If I select particular item then this should be render on then ProductScreen.js where the details of that particular product is mentioned...So How I pass the Id of the selected product from Product.js component to the ProductScreen Component

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>

CodePudding user response：

in your routing, you can pass routeParams with the URL like below.

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

put your <Link> inside the data.products.map(product=>() like below and pass the product id to the link.

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

in your ProductScreen.js file, you can access the product id with the below code

// 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);