Как передать данные со страницы на другую страницу с помощью реагирующего маршрутизатора

Question

Пожалуйста, мне нужна помощь по реагирующему маршрутизатору, я новичок в библиотеке и могу найти какое-то решение с тех пор Я получаю три результата от вызова API, в котором я сопоставляю данные, чтобы отобразить их в пользовательском интерфейсе, и теперь мне нужно то, что если я нажму на строку в одном из этого списка, я хочу, чтобы он перенес меня в экран, показывающий детали только той единственной вещи, на которую я нажал.

import React, { Component } from "react";

export default class User extends Component {
  state = { userDetails: "" };

  componentDidMount() {
    axios.get(`https://urlforapi.com`)
    .then(({ data }) => {
      this.setState({
        userDetails: data
      });
    });
  }

  render() {
    const { userDetails } = this.state;
    return (
      <div>
        {userDetails
          ? userDetails.map(info => {
              return (
                <Link to="/home/userDetails">
                  <div key={info.id}>
                    <p>{info.name}</p>
                  </div>
                  <div>
                    <p>{info.age}</p>
                  </div>
                  <div>
                    <p>{info.description}</p>
                  </div>
                </Link>
              );
            })
          : null}
      </div>
    );
  }
}

Answer 1

Вариант 1: Состояние прохождения

Вы можете передать какое-то состояние, уникальное для сопоставленной записи, например info.id, вместе с маршрутом pu sh, который происходит при нажатии на ссылку , Это запутывает данные пользователя, поскольку вы не пропускаете информацию в пользовательский интерфейс (т. Е. В браузер).

<Link
  to={{
    pathname: '/home/userDetails',
    state: {
      infoId: info.id,
    },
  }}
>

Вы можете затем распаковать состояние из подпорки location возвращаемого компонента по этому маршруту. Используйте охрану, если пользователь перешел на '/home/userDetails' из другого места, поскольку location и / или state могут быть неопределенными.

props.location && props.location.state && props.location.state.infoId

Вариант 2: передать что-то в URL-адресе

<Link to={`/home/userDetails/${info.id}`>

и получить параметр из подпорки match в возвращенном компоненте маршрута. Например, если маршрут выглядит следующим образом:

<Route path="/home/userDetails/:infoId" component={... } />

Затем в компоненте получите идентификатор:

props.match.params.infoId

Пользователь может видеть это, но вам не нужно использовать охрану шаблон для доступа, поскольку по определениям он будет определяться маршрутом (хотя infoID все еще можно определить, если пользователь вводит недопустимый идентификатор).

Ссылка на местоположение совпадение

Answer 2

Вот как вы можете передавать данные в компонент навигации

<Link
  to={{
    pathname: '/home/userDetails',
    state: {infoId: info.id},
  }}
>

И обращаться к нему таким же образом в компоненте навигации

, если это компонент на основе классов.

this.props.location.state

если это функциональный компонент

props.location.state

Answer 3

Вы можете использовать параметр параметров пути: react-router-dom.

Пример

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Topic from '../topic'

export default function App() {
  return (
    <Router>
      <div>
        <Route path="/topic/:name" component={Topic} />
      </div>
    </Router>
  );
}

Передать параметры:

import React, { Component } from "react";
import { Link } from 'react-router-dom'

export default class Topics extends Component {
  render() {
    return <Link to="/topic/someTopicName">Some Topic</Link>;
  }
}

Доступ к параметрам маршрутизатора в компоненте

import React from 'react'

export default function Topic(props) {
  return <h1>{props.match.params.name}</h1>
}