Как передать информацию с React Router на новую страницу? - PullRequest
Новая
       4

Как передать информацию с React Router на новую страницу?

1 голос
/ 14 апреля 2020

Я сделал быстрый пример CodeSandBox, что я после. У меня есть раздел «Наши курсы» на целевой странице с кнопкой «Читать дальше». После нажатия кнопки «Читать дальше», в зависимости от курса, эта информация будет отображаться. Теперь я получил кнопку для работы, но теперь я застрял и не могу понять, как передать соответствующую информацию на перенаправленную страницу. Теперь допустим, что я хочу, чтобы курс «Заголовок» и «Описание» был перенесен на перенаправленную страницу. Как я могу это сделать?

Ссылка CodeSandBox здесь - Ссылка здесь

Ответы [ 4 ]

2 голосов
/ 15 апреля 2020

Ваш компонент CardInfo может искать сведения о курсе из вашего репозитория курсов.

Чтобы выполнить поиск, вы можете определить, какая карта была выбрана, с помощью реакции-маршрутизатора 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).

1 голос
/ 15 апреля 2020

Существует несколько подходов для передачи этих данных:

Вы можете передавать данные через состояние ссылки следующим образом: 

<Link
    to={{
        pathname: `/card/${course.title}`,
        state: { description: course.description }
    }}
>...</Link>

И затем читать их в компоненте CardInfo следующим образом: 

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

const CardInfo = () => {
  const location = useLocation();

  console.log(location.state) // { description: 'Lorem ipsum...' }

Однако лучший способ сделать это - передать идентификатор курса в URL и прочитать остальную информацию из курсов. js file:

Это уже правильно, Вы принимаете идентификатор курса в качестве параметра URL: 

<Route path="/card/:id" component={CardInfo} />

Передавайте идентификатор курса по ссылке: 

 <Link to={`/card/${course.id}`}>

Считайте параметр id из URL и получите остальную информацию о курсе. из файла курсов: 

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

const CardInfo = () => {
  const params = useParams();

  console.log(courses[params.id]);
1 голос
/ 15 апреля 2020

В вашем CardInfo компоненте вы можете получить доступ к id, предоставленному маршруту, используя useParams из вашей библиотеки react-router-dom.

Я использую ваш <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, вы сможете использовать его для всего, что вам нужно.

1 голос
/ 15 апреля 2020

Вы можете передавать данные между Маршрутами, используя объектную версию to prop компонента Link, поэтому измените свой компонент 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;

Надеюсь, это поможет:)

...