У меня есть класс Component, куда я передаю данные:

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

class VisitDetails extends Component {
 //...
 render() {
 
 //...
   return() {
      <div>
         {/*pass to function EditVisit.js*/}
        <Link to={{pathname: `/visit/edit/${id}`, state: {data}}}>Edit</Link>
      <div>
   }
 }
}

Теперь у меня есть функция:

import React, { useState } from 'react';
import { useHistory } from "react-router-dom";

function EditVisit (data) {
  console.log(data.info)
 return(
   <div>
    Info: {data.info}
   <div>
 )
}

Но data.info не отображается ( undefined ).

1
4est 1 Дек 2020 в 10:52

3 ответа

Лучший ответ

Используйте обработчик реакции useLocation для доступа к состоянию маршрута.

Учитывая маршрут

<Link
  to={{
    pathname: `/visit/edit/${id}`,
    state: { data },
  }}
>
  Edit
</Link>

EditVisit

Состояние маршрута можно получить из location.state.data.

import React, { useState } from 'react';
import { useHistory, useLocation } from "react-router-dom";

function EditVisit (props) {
  const { state } = useLocation();
  return(
    <div>
     Info: {state.data}
    <div>
  )
}

Почему бы не использовать useHistory?

История изменчива

Объект истории является изменяемым. Поэтому рекомендуется получить доступ location из свойств рендеринга <Route>, а не из history.location . Это гарантирует, что ваши предположения о React исправить в хуках жизненного цикла.

1
Drew Reese 1 Дек 2020 в 08:48

В вашем случае вы можете прочитать это с реквизита

const EditVisit = (props) => {
  const { location: {state: { date }} } = props // date is needed variable from state
  ....
}

скриншот из документации на реактивный маршрутизатор

0
Дмитрий Портянка 1 Дек 2020 в 09:29

Если вы используете react-router, я думаю, вам следует использовать ловушку useHistory с location.state для захвата состояния в компоненте функции React. Ниже приведен пример кода.

import { useHistory } from 'react-router-dom'
function EditVisit () {
  const history = useHistory()
  const data = history.location.state
 return(
   <div>
    Info: {data.info}
   <div>
 )
}

Вы можете узнать больше на https : //levelup.gitconnected.com/how-to-pass-additional-data- while-redirecting-to-different-route-f7bf5f95d48c

0
Peter Du 1 Дек 2020 в 08:19