退卡取消定义

我正试图使用useparams创建一个可重复使用的组件,但我无法传递id,因为它总是说未定义

我真的不确定出了什么问题,因为idk为什么值没有被传递,这是我第一次使用路由,所以非常感谢任何帮助

卡片.jsx

import React from 'react';
import { useNavigate, Link} from 'react-router-dom';



const Card = (props) => {

 console.log(props.title)


  return (
    <div>
      <h2>{props.id}</h2>
      <h2>{props.title}</h2>
      <p>{props.price}</p>
      <Link to={`/cards-details/${props.id}`}>
              <p>Buy Now</p>
            </Link>
    </div>
  );
}

export default Card;  

cardDetails.jsx

import React from 'react';
import { useParams } from 'react-router-dom';
import cardData from './cardData';


function CardDetails(props) {
  const {id} = useParams()
  console.log(props.key)
  
  const selectedCard = cardData.find(card => card.id === id);
  return (
    <div>
        
      <h1>{id}</h1>
      
    </div>
  );
}

export default CardDetails;

卡片包装机.jsx

import React, { useState } from 'react';
import Card from './Card';
import CardDetails from './CardDetails';

function CardWrapper({ cards }) {
 

  return (
    <div className='grid grid-cols-4 place-items-center'>
      {cards.map(card=> (
        <Card key={card.id} title={card.title} price={card.price} />
      ))}
    </div>
  );
}

export default CardWrapper;

app.jsx

function App() {
  const [open, setopen] = useState(true)

  return (
    <>
   
    <div className="">
    
     <Router>
      { open &&
       <>
       <Banner />
          <Navbar />  
       </>
      }
        <Routes>
          <Route path='/' element={<Home funcNav={setopen}/>}/>
          <Route path='/auth' element={<Auth funcNav={setopen}/>}/>
          <Route path='/cart' element={<Cart />}/>
          <Route path='/sale' element={<All />}/>
          <Route path='/about' element={<About />}/>
          <Route path='/faq' element={<Faq />}/>
          <Route path ='/register' element={<Register />}/>
          <Route path = "/cards-details/:id" element={<CardDetails/>}/>
             
          
  
          
        </Routes>
      </Router>
    </div>
    </>
  )
}

export default App