如何在React中实现动态生成卡片跳转至指定页面？

方案1：为每个卡片配置独立路由路径 #

这种方式适合每个问题页面结构差异较大的场景：

1. 给cardInfo数组的每个对象添加path字段，指定对应跳转路径：

const cardInfo = [
  {image: "", title: "question1", text: "super hard q1", path: "/question1"},
  {image: "", title: "question2", text: "super hard q2", path: "/question2"},
  {image: "", title: "question3", text: "super hard q3", path: "/question3"},
  {image: "", title: "question4", text: "super hard q4", path: "/question4"},
  {image: "", title: "question5", text: "super hard q5", path: "/question5"},
  {image: "", title: "question6", text: "super hard q6", path: "/question6"},
]

2. 修改Link组件的to属性，绑定当前卡片的path值：

<Link to={card.path}>
  <Button variant="primary">Answer</Button>
</Link>

3. 在路由配置文件（如App.js）中，为每个路径配置对应页面组件：

import { Routes, Route } from 'react-router-dom';
import Question1 from './pages/Question1';
import Question2 from './pages/Question2';
// 导入其他问题页面

function App() {
  return (
    <Routes>
      <Route path="/question1" element={<Question1 />} />
      <Route path="/question2" element={<Question2 />} />
      {/* 其他路由规则 */}
    </Routes>
  );
}

方案2：使用动态路由参数（更简洁，适合相似结构页面） #

如果所有问题页面逻辑、结构相似，推荐用这种方式减少重复代码：

1. 给cardInfo数组的每个对象添加唯一标识id：

const cardInfo = [
  {image: "", title: "question1", text: "super hard q1", id: 1},
  {image: "", title: "question2", text: "super hard q2", id: 2},
  {image: "", title: "question3", text: "super hard q3", id: 3},
  {image: "", title: "question4", text: "super hard q4", id: 4},
  {image: "", title: "question5", text: "super hard q5", id: 5},
  {image: "", title: "question6", text: "super hard q6", id: 6},
]

2. 修改Link的to属性，使用动态参数路径：

<Link to={`/question/${card.id}`}>
  <Button variant="primary">Answer</Button>
</Link>

3. 配置动态路由，并在目标页面获取参数：

// App.js 路由配置
import { Routes, Route } from 'react-router-dom';
import QuestionPage from './pages/QuestionPage';

function App() {
  return (
    <Routes>
      <Route path="/question/:questionId" element={<QuestionPage />} />
    </Routes>
  );
}

在QuestionPage组件中，通过useParams获取路由参数并渲染对应内容：

import { useParams } from 'react-router-dom';

const QuestionPage = () => {
  const { questionId } = useParams();
  // 根据questionId匹配对应问题数据，渲染页面
  return <div>问题 {questionId} 的详细内容</div>;
}

完整修改后的QCard组件（方案2示例） #

import React from 'react';
import {Card, Button} from 'react-bootstrap'
import { Link } from 'react-router-dom';

const QCard = () => {

  const cardInfo = [
        {image: "", title: "question1", text: "super hard q1", id: 1},
        {image: "", title: "question2", text: "super hard q2", id: 2},
        {image: "", title: "question3", text: "super hard q3", id: 3},
        {image: "", title: "question4", text: "super hard q4", id: 4},
        {image: "", title: "question5", text: "super hard q5", id: 5},
        {image: "", title: "question6", text: "super hard q6", id: 6},
       ]
  
  const renderQCard = (card, index) => {
    return (
      <Card style={{ width: '20rem' }} key={index} className="box">
        <Card.Img variant="top" src={card.image} />
        <Card.Body>
          <Card.Title>{card.title}</Card.Title>
          <Card.Text>
            {card.text}
          </Card.Text>
          <Link to={`/question/${card.id}`}>
            <Button variant="primary">Answer</Button>
          </Link>
        </Card.Body>
      </Card>
    );
  }

  return <div className='App'>{cardInfo.map(renderQCard)}</div>

}

export default QCard

内容的提问来源于stack exchange，提问作者Sheet