当我试图呈现通过链接从另一个页面传递过来的购物车项目时，我得到了一个空白页面。
当我使用console.log时，它工作正常，并显示一个数组。
我该如何渲染它们，用这种方法还是其他方法？我使用最新版本的react-router

Catalog.js传递数据

import { Header } from "./Header";
import {data} from './Data'
import ListProducts from "./ListProducts";
import { useState } from "react";
import { Link } from "react-router-dom";

 export default function Catalog() {
    const {products} = data;
    const [cartItems, setCartItems] = useState([]);

    const onAdd = (product) => {
        // const exist = cartItems.find((x) => x.id === product.id);
        setCartItems([...cartItems, { ...product}]);

    }   

    return (
        <>
            <Header countCartItems={cartItems.length}/>
            <ListProducts products={products} onAdd={onAdd}/>
            <Link to={`/cart`} state={{ cartItems:{cartItems} }}>Cart</Link>
        </>
    )
}

Cart.js接收数据

import './Cart.css'

import { useLocation } from 'react-router-dom'
import { Header } from './Header'

function Price(){
  return (
    <div className='price-cont'>
      <div className='price-cointainer'>
            <div className='total'>TOTAL</div>
            <div className='price'>00,00 €</div>
            <div className='checkout'>CHECKOUT</div>
      </div>
    </div>
    
  )
}

function Card(){
  const location = useLocation()
  const { cartItems } = location.state
    
  console.log(cartItems)

  return (
    <h1>{cartItems}</h1>
  )
}

export default function Cart(){
  

    return (
      <>
      <Header />
      
      <div className='cart-container'>
          <div className='item-container'>      
            <Card />
          </div>
      </div>
      <Price />
      </>
    );
  }

我试过了但还是一样