如何从动态创建的页面重定向到响应中的特定页面？

Question

我有一堆动态创建的卡片，我希望它们中的每一个都指向一个特定的页面。我怎么做 ？谢谢

到目前为止我的代码：

应该指向特定问题页面的卡片：

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"},
        {image: "", title: "question2", text: "super hard q2"},
        {image: "", title: "question3", text: "super hard q3"},
        {image: "", title: "question4", text: "super hard q4"},
        {image: "", title: "question5", text: "super hard q5"},
        {image: "", title: "question6", text: "super hard q6"},
       ]
  
  

  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">
            <Button variant="primary">Answer</Button>
          </Link>
        </Card.Body>
      </Card>
    );
  }

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

}

export default QCard

Answer 1

使用您的代码当前的工作方式，我将在您的对象中添加一个键值对link: "/toPage"，并使用to={card.link} 在<Link> 组件中获取您的值。

例子：

const cardInfo = [
    { image: "", title: "question1", text: "super hard q1", link: "/toPage" },
    // ...
];

// Now in your Link tag
<Link to={card.link}>
    <Button variant="primary">Answer</Button>
</Link>

Answer 2

我也在here 看到了你的问题。我会回答你的两个问题。

Here is the solution

您可以创建问题页面并简单地从路由器链接（卡信息）获取参数并为每个问题实施您想要做的任何事情。这是动态的，取决于您点击的每张卡片。

Answer 3

我不明白你的问题你想创建一个动态页面还是你已经创建了一个页面并且只想分配它们但是第二个 您可以在 cardInfo 中添加另一个字段，即页面字段

  const cardInfo = [
        {image: "", title: "question1", text: "super hard q1",page:"/page1"},
        {image: "", title: "question2", text: "super hard q2",page:"/page2"},
        {image: "", title: "question3", text: "super hard q3",page:"/page3"},
        {image: "", title: "question4", text: "super hard q4",page:"/page4"},
        {image: "", title: "question5", text: "super hard q5",page:"/page5"},
        {image: "", title: "question6", text: "super hard q6",page:"/page6"},
       ]

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

但当然你必须在路线中声明主题

  <Routes>
    <Route path="/page1" element={<page1/>} />
    <Route path="/page2" element={<page2 />} />
    <Route path="/page3" element={<page3 />} />
    <Route path="/page4" element={<page4 />} />
    <Route path="/page5" element={<page5 />} />
    <Route path="/page6" element={<page6 />} />
  </Routes>

Answer 4

您可以使用 react-router-dom 在 react 中使用动态路由

例子：

为问题创建一个组件：

// components/Question.js

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

export default function Question (props) {
  const {question} = useParams();

  return <>
    <h1>Question: {question}</h1>
  </>
}

为问题创建动态路由：

// App.js ot Index.js

import React from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Question from '.components/Question'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <Routes>
            <Route path="/question/:question" element={<Question />} />
        </Routes>
    </BrowserRouter>
)

在卡片中：

<Link to={`/question/${title}`}

希望它有效！

Answer 5

import React from 'react'
import { Link } from 'react-router-dom'

const renderLink  = () => {
  return (
    <Link to={'/yourUrl'}>
      <button>Answer</button>
      </Link>
  )
}

在反应中创建指向另一个页面的链接时，将您的元素包装在链接标签中，并将“to”属性设置为您的目的地。

另一种方法是在声明对象时设置链接键值对。然后在 Link 的“to”属性中访问该键。

myObjects = [
  {name: "Bob", age: 30, link: '/yourUrl'},
  {name: "Joe", age: 20, link: '/yourUrl'},
  {name: "Rick", age: 50, link: '/yourUrl'}
]
...

<Link to={card.link}>
  <button>Answer</button>
</Link>

Answer 6

因此，为了实现我的目标，我所要做的就是创建一个链接 到问题组件：

<Route path="/:title" element={<Question />}></Route>

然后这样做：

import React from 'react';
import Cards from './Cards';
import { useParams, Link } from 'react-router-dom';
import './styles/Question_style.css';

const Question = () => {
  const { title } = useParams();
  const card = Cards.find((card) => card.id.slice(1) === title);
  return (
    <div>
      <div className="title">
        <h1>{card.title}</h1>
      </div>
      <div className="answer">
        <p>{card.answer}</p>
      </div>
      <div className="link-back">
        <Link to="/">
          <button type="button" className="back-btn">
            Back
          </button>
        </Link>
      </div>
    </div>
  );
};

export default Question;

为了使组件的内容动态