将**${id}属性传递给我的动态路由[id]>page.jsx时出现问题，该路由位于CartItemPage.jsx文件中。我使用的是Context API，类似于React，在这里我存储了一个CartItems的数组，并使用这个数组渲染我的Cart。我有一个主页和一个目录页，并且有ProductItem组件。当我点击它们时，我需要将用户导航到该特定产品的CartItemPage[id]，但我在获取id属性时遇到了问题。
下面是我的CartItem**组件（实际上是一个产品）的代码：

'use client';
import Link from 'next/link';
import styles from './CartItem.module.css';
import { useState, useEffect } from 'react';
import { useAppStore } from '../../app/Context/store';

const CartItem = ({ data }) => {
    const [addedToCart, setAddedToCart] = useState(false);
    const { addToCart, cartItems } = useAppStore();

    useEffect(() => {
        if (cartItems.some(cartItem => cartItem.id === data.id)) {
            setAddedToCart(true);
        } else {
            setAddedToCart(false);
        }
    }, [cartItems]);

    const handleAddToCart = data => {
        if (cartItems.some(cartItem => cartItem.title === data.title)) {
            setAddedToCart(true);
        } else {
            addToCart(data);
            setAddedToCart(true);
            console.log(data);
            console.log(cartItems);
        }
    };

    return (
        <>
            <div className={styles.productCard}>
                <Link href={`/cartItemPage/${data.id}`}>
                    <div className='flex items-center flex-col'>
                        <img className={styles.productImage} src={data.image} alt={data.title} />
                        <h3 className={styles.productTitle}>{data.title}</h3>
                        <p className={styles.productPrice}>{data.price} $</p>

                        {/* Додаткові деталі */}
                    </div>
                </Link>
                <button
                    onClick={() => {
                        handleAddToCart(data);
                    }}
                    className={addedToCart ? styles.addedButton : styles.addButton}
                >
                    {addedToCart ? 'У кошику' : 'До кошику'}
                </button>
            </div>
        </>
    );
};

export default CartItem;

下面是**CartItemPage代码，我在这里创建了[id] > page.jsx**：

'use client';
import React, { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useAppStore } from '@/app/Context/store';

const CartItemPage = ({ id }) => {
    const router = useRouter();
    const searchParams = useSearchParams();
    const { addToCart, cartItems } = useAppStore();
    const [cartItem, setCartItem] = useState(null);

    useEffect(() => {
        const fetchCartItem = async () => {
            try {
                const response = await fetch(`https://fakestoreapi.com/products/${id}`);
                const data = await response.json(response.data);
                setCartItem(data);
            } catch (error) {
                console.log(error);
            }
        };

        if (id) {
            fetchCartItem();
        }
    }, [id]);

    return (
        <>
            <div>id: {id}</div>
        </>
    );
};

export default CartItemPage;