[3. React.js] Link to new Page vs Pass to Component [Props]

In React when you want to design a page wherein user clicks on product details on the main product list page should I link to new page then pass props to the product detail component or pass to product detail component first then link the product detail page? show me code snippets with explanation

 

when designing a page where the user clicks on a product in the main product list page and wants to view the product details, both approaches are valid. Let's explore both approaches with code snippets and explanations. 

 

Approach 1: Linking to the new page first and passing props to the product detail component: 

In this approach, you first link to the product detail page and then pass the necessary props to the product detail component. Here's an example:

 

ProductListPage.js:

import React from "react";

import { Link } from "react-router-dom";

const ProductListPage = () => {

  // Assuming you have a list of products

  const products = [

    { id: 1, name: "Product 1", price: 10 },

    { id: 2, name: "Product 2", price: 20 },

    { id: 3, name: "Product 3", price: 30 },

  ];

  return (

    <div>

      {products.map((product) => (

        <div key={product.id}>

          <h3>{product.name}</h3>

          <p>Price: ${product.price}</p>

          <Link to={{

            pathname: `/products/${product.id}`,

            state: { product }

          }}>View Details</Link>

        </div>

      ))}

    </div>

  );

};

export default ProductListPage;

ProductDetailPage.js:

import React from "react";

import { useLocation } from "react-router-dom";

const ProductDetailPage = () => {

  const location = useLocation();

  const { product } = location.state;

  return (

    <div>

      <h2>Product Details</h2>

      <p>Product ID: {product.id}</p>

      <p>Product Name: {product.name}</p>

      <p>Product Price: {product.price}</p>

      {/* Display the rest of the product details */}

    </div>

  );

};

export default ProductDetailPage;

In this approach, the ProductListPage component renders a list of products. Each product is displayed with its name, price, and a link to the product detail page. The link is created using the Link component from react-router-dom. The to prop of the Link component includes the pathname for the product detail page and the state object that contains the product data. The ProductDetailPage component uses the useLocation hook from react-router-dom to access the location object, which contains the state passed from the previous page. It retrieves the product data from the location state and renders the product details accordingly.

 

Approach 2: Passing props to the product detail component before linking to the detail page:

In this approach, you pass the necessary props (such as the product ID or product object) to the product detail component before linking to the product detail page. Here's an example:

 

ProductListPage.js:

import React from "react";

import { Link } from "react-router-dom";

const ProductListPage = () => {

  // Assuming you have a list of products

  const products = [

    { id: 1, name: "Product 1", price: 10 },

    { id: 2, name: "Product 2", price: 20 },

    { id: 3, name: "Product 3", price: 30 },

  ];

  return (

    <div>

      {products.map((product) => (

        <div key={product.id}>

          <h3>{product.name}</h3>

          <p>Price: ${product.price}</p>

          <Link to={`/products/${product.id}`} state={{ product }}>View Details</Link>

        </div>

      ))}

    </div>

  );

};

export default ProductListPage;

ProductDetailPage.js

import React from "react";

import { useParams } from "react-router-dom";

const ProductDetailPage = () => {

  const { productId } = useParams();

  // Fetch the product details using the product ID

  // You can use an API call or any other data fetching method

  return (

    <div>

      <h2>Product Details</h2>

      <p>Product ID: {productId}</p>

      {/* Display the rest of the product details */}

    </div>

  );

};

export default ProductDetailPage;

In this approach, the ProductListPage component renders a list of products. Each product is displayed with its name, price, and a link to the product detail page. The link is created using the Link component from react-router-dom. The to prop of the Link component includes the pathname for the product detail page, and the state prop passes the product object as props. The ProductDetailPage component uses the useParams hook from react-router-dom to access the product ID from the URL params. You can then use the product ID to fetch the product details from an API or any other data source. Both approaches have their advantages depending on the complexity of your application and the data flow requirements. Approach 1 may be more suitable when you need to pass additional data along with the props, while Approach 2 may be preferred when the URL itself contains enough information to fetch the necessary data.