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

Question

我是 react-router v6 的新手

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

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

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

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

看起来在 CardList.js 或 Card.js 组件中您需要创建链接 (<Link>) 和路由 (<Route>)（两者都等于数据中的电影数量）使用 .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>
        ))}

显然这是行不通的。

App.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

Answer 1

你的代码结构是正确的。您只需要使用Link，您映射的每张卡片都不需要外部Route 组件。这里是 link 以获取更多信息。希望你觉得它有帮助。

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

Clicking on a Card component should create a new route and display further information

reactjs

react-router

react-router-dom