reactjs - 单击 Card 组件应创建新路由并显示更多信息

我是 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.jsCard.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

回答1

你的代码结构是正确的。您只需要使用Link,您不需要为您映射的每张卡片使用外部Route 组件。这是进一步信息的链接。希望对您有所帮助。 https://stackoverflow.com/a/57059249/17715977

相似文章

最新文章