我是 react-router v6 的新手

我有 4 个组件，App、CardList、Card 和 CardInfo。有来自 API 的数据（对象数组，每个对象代表一部电影）通过 useState 钩子保存在 App.js 中。

在 CardList 中，我使用 map 遍历数组以生成一堆 Card 组件并通过 props 传递数据。

我现在想要的是能够点击任何 Card 组件并让它导航到不同的路线，例如localhost:3000/1（用于 ID 为 1 的卡片）、localhost:3000/2（用于 ID 为 2 的卡片）等，并且在与卡片 ID 对应的每条路线中，都会有一个框/模式 (CardInfo.js)包含有关电影的更多信息的组件。

我正在尝试使用 react-router-dom （版本 6）来完成此操作。

看起来在 CardList.js 或 Card.js 组件中，您需要使用.map 函数并将 Card 组件包装在 <Link> 和 <Route> 标记中。就像是

{items.map(movie => (
               <Route path="/:id" element={<Card items={movies} />} exact>
               <Link to={`/${movie.id}`}>
                <Card   
                    key={movie.id}
                    id={movie.id}
                    name={movie.name}
                    description={movie.description}   
                    img={movie.image_url}
                 />
               </Link>
               </Route>
        ))}

显然那是行不通的。

应用程序.js：

import './App.css';
    import CardList from './features/Card/CardList';
    import CardInfo from './features/Card/CardInfo';
    import { useState, useEffect } from "react";
    import { BrowserRouter, Route, Routes } from 'react-router-dom';

    function App() {
       const [movies, setMovies] = useState([]);
     
       useEffect(() => {
         const getData = fetch('https://api.com/movies')
         .then(data => data.json())
         .then(items => { setMovies(items) })
       }, [])


      return (
        <BrowserRouter>
          <Routes>
            <Route path="/:id" element={<CardInfo items={movies} />} exact></Route>
          </Routes>
            <CardList items={movies} />
        </BrowserRouter>
      );
    }

    export default App;

CardList.js：

import React from 'react'
import Card from './Card'
import "./CardList.css";

const CardList = ({ items }) => {
  return (
    <div className="cardList">
        {items.map(movie => (
                <Card   
                    key={movie.id}
                    id={movie.id}
                    name={movie.name}
                    description={movie.description}   
                    img={movie.image_url}
                 />
        ))}
    </div>
  )
}

export default CardList

Card.js：

import React from 'react'
import "./Card.css";
import { Link } from 'react-router-dom';

function Card(props) {

  return (
    <Link to={`/${props.id}`}> 
     <div className="card">
        <div>
            <img src={props.img} />
            <h2>{props.name}</h2>
        </div>
     </div>
    </Link>
  )
}

export default Card

CardInfo.js：

import React from 'react'

function CardInfo(props) {
  return (
    <div>
      <p>{props.description}</p>
    </div>
  )
}

export default CardInfo