[ad_1]
My navigation links work in my app and on my homepage but when I try to create a button link to my product page from my shop its either only showing the header and footer (which are in my app.js file or showing a blank screen. Ive imported the product page at the top so I dont understand why it isnt working. Any help would be much appreciated. Below is my shop.js file
import React, { useState } from 'react';
import AddToCart from './Components/AddToCart';
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Product from './Product';
const HOME_GARDEN = 'home and garden';
const ART = 'Art';
const ACCESSORIES = 'Accessories';
const DIGITAL_PHOTOGRAPHS = 'Digital Photographs';
const FASHION = 'Fashion';
const FOOTWEAR = 'Footwear';
const JEWELLERY = 'Jewellery';
const ALL = 'All';
export default function Shop({ setCart, cart, handleClick }) {
const [products] = useState([
{
category: ART,
name: 'Original David Bowie Mug Shot Mixed Media Framed Artwork',
cost: 200,
image:'images/bowiebig.jpeg',
image2: 'images/bowiesmall.jpeg',
image3:'images/bowie2small.jpeg',
description: "Original David Bowie Mug Shot Mixed Media Framed Artwork floral
painting on wooden canvas with an original pop art style David Bowie Mugshot on top
painting is framed with a red baroque style frame including the words deadly flowers
bloom around frame",
},
{
category: ACCESSORIES,
name: 'F&F Ladies Long Black Real Leather Size Small Gloves',
cost: 35,
image:'images/Fred.jpeg',
image2: '',
image3:'',
description: 'F&F Ladies Long Black Real Leather Size Small Gloves with ruched
horizontal detailing on the front. Gloves are in good condition ',
},
{
category: DIGITAL_PHOTOGRAPHS,
name: 'Black on Black Original Limited Edition Digital Photograph',
cost: 50,
image:'images/BlackonBlack.jpg',
image2: '',
image3:'',
description: 'Upon purchase you will receive links to download the digital
photograph in the thank you page of the checkout as well as an emailed link that
will last 30 days. ',
},
{
category: FASHION,
name: 'Ladies Small BOY London Distressed Acid Wash Blue Midi Denim Skirt',
cost: 50,
image:'images/Boy.jpeg',
image2: '',
image3:'',
description: 'Ladies Small BOY London Distressed Acid Wash Blue Midi Denim
Skirt. BOY London sizes run small. This skirt is size 8/10 even though the label
says large. Condition is New with tags.',
},
{
category: FOOTWEAR,
name: 'Ladies Size 8 / 41 Black Real Suede Jeffrey Campbell Platform Open
Toe Sandals',
cost: 60,
image:'images/Campbell.jpeg',
image2: '',
image3:'',
description: 'Ladies UK Size 8 European size 41 black real suede Jeffrey
Campbell high platform open-toe sandals with adjustable strap. The sandals are in
good condition as theyve only worn outside a few times. The heel and platform is
made from wood so the sandals are sturdy but relatively lightweight. ',
},
{
category: JEWELLERY,
name: 'Jean Paul Gaultier Scandal Bottle Top Customised Fishnet
Necklace',
cost: 50,
image:'images/Scandal.jpeg',
image2: '',
image3:'',
description: 'Jean Paul Gaultier Scandal Bottle Top Customised Necklace
made with braided fishnets.',
},
{
category: HOME_GARDEN,
name: 'Blanket',
cost: 19.99,
image:
'https://encrypted
tbn0.gstatic.com/imagesq=tbn%3AANd9GcSpwdYDmUL_ZEqhL
V7ZWRdQAU7DGcGaxtCt7SrTlL9umrQs2Un7rj9Nbb9Vq01RtEfA0eAVmdt-&usqp=CAc',
page:'Blanket',
},
]);
const [category, setCategory] = useState(ALL);
const getProductsInCategory = () => {
if (category === ALL) {
return products;
} else {
return products.filter((product) => product.category === category);
}
};
return (
<>
<h1>Shop</h1>
<button onClick={(e) => setCategory(ART)}>
Art</button>
<button onClick={(e) => setCategory(HOME_GARDEN)}>
Home and Garden</button>
<button onClick={(e) => setCategory(ACCESSORIES)}>
Accessories</button>
<button onClick={(e) => setCategory(DIGITAL_PHOTOGRAPHS)}>
Digital Photographs</button>
<button onClick={(e) => setCategory(FASHION)}>
Fashion</button>
<button onClick={(e) => setCategory(FOOTWEAR)}>
Footwear</button>
<button onClick={(e) => setCategory(JEWELLERY)}> Jewellery</button>
<button onClick={(e) => setCategory(ALL)}>
All</button>
<div className="products">
{getProductsInCategory().map((product, idx) =>(
<div className="product" key={idx}>
<h3>{product.name}</h3>
<h4>£{product.cost}</h4>
<img src={product.image} alt={product.name} />
<br />
<AddToCart product={product} cart={cart} setCart={setCart}/>
<Link to="/Product"><button type="button">Product</button></Link>
<Routes>
<Route path="/Product" element={<Product />} />
</Routes>
<button onClick={() => handleClick(product)}>
View Product
</button>
</div>
))}
</div>
</>
);
}
[ad_2]