In React, passing data between components using React Router is a common practice, especially when navigating from one page to another. Let’s break down the process of passing and receiving data using React Router with some sample code:
Setting Up Navigation Link:
Use the Link component from React Router to create a link to the target page and pass the data through the state object.
<Link
to={{
pathname: `/seller/product-management/edit`,
state: product,
}}
>
Details
</Link>
2.Accessing State Data:
Use the useLocation hook to access the state object containing the passed data.
const ProductDetails = () => {
const { state } = useLocation();
// Accessing the received data
const { productName, price, img, status } = state;
return (
<div>
<h2>Product Details</h2>
<img src={img} alt={productName} />
<p>Name: {productName}</p>
<p>Price: {price}</p>
<p>Status: {status}</p>
</div>
);
};
export default ProductDetails;
![Introduction to Docker Containers [With Commands]](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd8oklcpekix12dp929sj.png)
