0

Hello sir I have created a Homescreen page but when I click the product  image or name  it is not going to Home Screen.I have even checked your Udemy course same pattern I followed but it is not happening to me alone .I created a Nav bar in a component called header and imported in App.js.

#Homescreen
import data from "../Data/data";
import { Link } from 'react-router-dom'
 function HomeScreen () {
    return(
        <div>
            <h1 className='feature'>Featured Products</h1>
            <div className='products'>
                {
                    data.products.map(product => (
                        <div className='product' key={product.slug}>
                                <Link to={`/product/${product.slug}`} >
                                <img src={product.image} alt={product.name} />
                            </Link>
                            <div className='product-info'>
                                <Link to={`/product/${product.slug}`} >
                                    <p>{product.name}</p>
                                    </Link>
                                <p><strong>${product.price} </strong></p>
                                <button>Add to Cart</button>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}
 export default HomeScreen;
  #App.js
 import Header from './components/Header';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
 function App() {
  return (
      <BrowserRouter>
    <div className="App">
    <Link to='/' > <Header /></Link>
        <Routes>
          <Route  path='/product/:slug' element={<ProductScreen />} />
          <Route   path='/' element={ <HomeScreen /> }></Route>
        </Routes>
    </div>
      </BrowserRouter>
  );
}
 export default App;
 #product.js
 import '../styles/Product.css'
import data from '../Data/data'
import { Link } from 'react-router-dom';
 const Products = () => {
     return (
        <>
            <h1 className='feature'>Featured Products</h1>
            <div className='products'>
                {
                    data.products.map(product => (
                        <div className='product' key={product.slug}>
                            <Link to={`/product/${product.slug}`} >
                                 <img src={product.image} alt={product.name} />
                            </Link>
                            <div className='product-info'>
                                <Link to={`/product/${product.slug}`} >
                                    <p>{product.name}</p>
                                </Link>
                                <p><strong>${product.price} </strong></p>
                                <button>Add to Cart</button>
                            </div>
                        </div>
                    ))
                }
            </div>
        </>
       )
}
 export default Products;
Abishek Asked question November 18, 2022