我有这个主要的产品页面，从本地JSON文件中获取所有产品

interface productItem {
      id: number;
      name: string;
      image: string;
      price?: string;
      prices: {
        half: string;
        full: string;
      };
      categories: string;
    }

  const [products, setProducts] = useState("Cakes");
  const [sltproducts, setSltProducts] = useState<productItem[]>([]);

  useEffect(() => {
    const fetchProduct = () => {
      fetch("items.json")
        .then((response) => response.json())
        .then((productdata) => {
          const productcakes = productdata.Cakes.map((item: productItem) => ({
            ...item,
            categories: "Cake",
          }));
           const productmemorella = productdata.Memorella.map((item: productItem) => ({
             ...item,
             categories: "Memorella",
           }));
           const producticecream = productdata.Ice_Cream.map(
             (item: productItem) => ({
               ...item,
               categories: "Ice Cream",
             })
          );
          const productpastries = productdata.Pastries.map(
            (item: productItem) => ({
              ...item,
              categories: "Pastries",
            })
          );
          setSltProducts([...productcakes,...productmemorella, ...producticecream, ...productpastries]);
        })
        .catch((error) => {
          console.error("Error fetching items:", error);
        });
    }
    fetchProduct();
  }, [])

这是我的卡组件在同一页上

{sltproducts
                .filter((product) => product.categories === "Cake")
                .map((prdct) => (
                  <Link
                    href={`/Product/${prdct.categories}/${prdct.id}`}
                    key={prdct.id}
                    className="product-page-selected-cakes-card"
                  >
                    <img src={prdct.image} alt="" />
                    <div className="product-price">
                      <h5>{prdct.name}</h5>
                      <hr />
                      <p>₹{prdct.prices.half}</p>
                    </div>
                  </Link>

这是我的单一产品文件夹，我给予了[]动态路由

我如何获取一个单一的产品是由用户选择这个单一的产品页面。请注意，“产品。类别”是因为我有多个部分，即蛋糕，糕点等