在反应中将变量从一个组件发送到另一个组件

Question

I have created a routing where the component ProductId will be rendered (a href="/id")when there is a click on div with class name="card"

 <a href="/id"> <div className="card"> <div className="imgBx"> <h1>Product</h1> <img src={image} alt={image} className="myProductImage" /> </div> <div className="content"> <div className="productName"> <h3>{name}</h3> </div> <div className="price_rating"> <div className="price">{price} $</div> <div className="ratings"> {ratings} <i className="fa fa-star"></i> </div> </div> </div> </div> </a>

The Route is defined as following:

 ReactDOM.render( <BrowserRouter> <Switch> <Route path="/id" component={ProductId}/> <Route path="/" exact component={Products}/> </Switch> </BrowserRouter>,document.getElementById("root") );

Now when the component ProductId is rendered I want to pass props (_id), (this props is present in the component where the onClick event is taking place) with onClick but since I am not calling the directly I cannot pass the props like.

Is there any other way where I can pass the props to the ProductId component when there is an onClick event on div with class name="card"

Answer 1

If i understand correctly, you should use a dynamic route that contain the product id

For example:

<Router>
  <Route path="/product/:id" component={ProductId} />
</Router>

Then your ProductId component will receive the id from the router params in props.match.params.id

see https://reactrouter.com/web/api/Route/component