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>
 </>
 );
 }