Question

如何使用 React Router 将信息传递到新页面？

2020-04-14

281

javascript reactjs react-router react-router-dom

我制作了一个快速的 CodeSandBox 示例。我的登录页面上有一个“我们的课程”部分，其中包含“阅读更多”按钮。单击“阅读更多”按钮后，根据课程的不同，它会呈现该信息。现在我让按钮工作了，但现在我卡住了，无法弄清楚如何将相关信息传递到重定向页面。现在假设我想将课程“标题”和“说明”传递到重定向页面。我该怎么做？

CodeSandBox 链接在这里 - 链接在这里

Answer 1

您的 CardInfo 组件可以从您的课程存储库中查找课程详细信息。

要执行查找，您可以使用 react-router useParams 钩子确定选择了哪张卡片；这使您可以确定通过所选路线传递了哪个课程标识符，即

import React from "react";
import courses from "./courses";
import { useParams } from "react-router-dom";

const CardInfo = () => {
  const { id } = useParams();
  const course = courses.find(course => course.id === id);

  return (
    <div>
      <h1>{course.title}</h1>
      <p>{course.description}</p>
    </div>
  );
};

export default CardInfo;

可以在此处（它是您的 CodeSandBox 的一个分支）中看到完整的工作示例。

Answer 2

您可以使用 Link 组件的 to 属性的对象版本在路由之间传递数据，因此请将您的 Link 组件更改为：

//Card.jsx
<Link 
  to={{
    pathname: `/card/${course.title}`,
    state: {
      description: course.description
    }
  }}>
  <button className="btn">Read more</button>
</Link>

然后在您的 CardInfo.jsx 组件中，您可以通过 props.location.state.description 访问此数据

import React from "react";

const CardInfo = (props) => {
  console.log(props)
  return (
    <div>
      <h1>
        How can I pass course title here depending on which button I click
      </h1>
      <p>{props.location.state.description}</p>
    </div>
  );
};

export default CardInfo;

希望对您有所帮助 :)

Answer 3

在您的 CardInfo 组件中，您可以使用 react-router-dom 库中的 useParams 访问路由提供的 id 。

我正在使用您的 <Route path="/card/:id" component={CardInfo} /> 作为参考。

像这样实现它：

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

const CardInfo = () => {
  const { id } = useParams()

  return <div>Card ID: {id}</div>
}

export default CardInfo

现在您已经获得了 id ，您应该能够将它用于任何您需要的东西。