如何從動態創建的頁面重定向到回應中的特定頁面？

我有一堆動態創建的卡片，我希望它們中的每一個都指向一個特定的頁面。我怎么做 ？謝謝

到目前為止我的代碼：

應該指向特定問題頁面的卡片：

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

uj5u.com熱心網友回復：

link: "/toPage"使用您的代碼當前的作業方式，我將向您的物件添加一個鍵值對，并在<Link>組件中使用to={card.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>

uj5u.com熱心網友回復：

我也在這里看到了你的問題。我會回答你的兩個問題。

這是解決方案

您可以創建問題頁面并簡單地從路由器鏈接（卡資訊）獲取引數并為每個問題實施您想要做的任何事情。這是動態的，取決于您點擊的每張卡片。

uj5u.com熱心網友回復：

我不明白你的問題你想創建一個動態頁面還是你已經創建了一個頁面并且只想分配它們但是對于第二個你可以在你的 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>

uj5u.com熱心網友回復：

您可以使用 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}`}

希望它有效！

uj5u.com熱心網友回復：

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>

標籤：javascript反应

上一篇：撰寫此代碼的正確方法是什么？

下一篇：js如何增加一個大數