Product page do not show products image and contents

Question

This is my ProductScreen.js file

import React from "react";
import { Link } from "react-router-dom";
import { Row, Col, Image, ListGroup, Card, Button } from "react-bootstrap";
import Rating from "../components/Rating";
import products from "../products";

const ProductScreen = ({ match }) => {
    const product = products.find(p => p._id === match.params.id);

    return (
        <>
            <Link className="btn btn-dark my-3" to="/">
                Go Back
            </Link>
            <Row>
                <Col md={6}>
                    <Image src={product.image} alt={product.name} />
                </Col>
                <Col md={3}></Col>
            </Row>
        </>
    );
};
export default ProductScreen;

And This is my app.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
import ProductScreen from "./screens/ProductScreen";

const App = () => {
    return (
        <Router>
            <Header />
            <main className="py-3">
                <Container>
                    <Routes>
                        <Route exact path="/" element={<HomeScreen />} />
                        <Route path="product/${:id}" element={<ProductScreen />} />
                    </Routes>
                </Container>
            </main>
            <Footer />
        </Router>
    );
};

export default App;

Maybe I use the Routes tag wrongly because in the video course I watch, the teacher does not use it. but I use it in the new version, so It is not working without the tag Then I find it on the internet and use this additional tag. Anyone please help me I really need to complete this project. When I run this app and click any product /product/id page is open but nothing is shown

Answer 1

Issues

I see at least 2 issues and a potential 3rd that often trips up new devs in react-router-dom.

1. The product detail route path is malformed and doesn't specify the id param correctly.
2. The ProductScreen component is accessing an undefined prop. No props are passed to ProductScreen so match is undefined and should actually be throwing an error when attempting to access further into it to get params.
3. The remaining issue is that all route params will always be string values, but sometimes (or oftentimes) the product id value it's compared against will be a number type. Using strict equality checks will fail. 5 === '5' // false.

Solution

1. Fix the route path.

   <Routes>
     <Route path="/" element={<HomeScreen />} />
     <Route path="product/:id" element={<ProductScreen />} /> // <-- remove template string "stuff"
   </Routes>
   

2. Use the useParams hook to access the route param.

3. Use a type safe comparison. It's easy to convert everything to strings and use the strict equality check.

4. Keep in mind that Array.prototype.find can/does return undefined is no match is found in the array. The component code should handle this gracefully.

   import { Link, useParams } from "react-router-dom";
   ...
   
   const ProductScreen = () => {
     const { id } = useParams(); // <-- id is string
     const product = products.find(p => String(p._id) === id); // <-- convert `p._id` to string
   
     return (
       <>
         <Link className="btn btn-dark my-3" to="/">
           Go Back
         </Link>
         {product
           ? (
             <Row>
               <Col md={6}>
                 <Image src={product.image} alt={product.name} />
               </Col>
               <Col md={3}></Col>
             </Row>
           )
           : <p>Sorry, no match found.</p>
         }
       </>
     );
   };
   

Answer 2

try this code:

<Route path="product/:id" element={<ProductScreen />} />

And in your product screen try to use useParams Hook to get params

const {id} = useParams()
console.log(id); // check if you are getting value or not

const product = products.find(p => p._id === +id);
console.log(product) // check is there any product