React JS Как передавать данные между страницами в Hook (useEffect)

#reactjs #react-hooks

#reactjs #реагировать-хуки

Вопрос:

Я пытаюсь передать один объект данных на другую страницу, но я не могу получить данные на второй странице. приведенный ниже код, который я использую

Первая страница передает данные по ССЫЛКЕ

  <Link to={{ pathname: `${path}/users/${organization.id}`,
                                            data: organization
                                        }}>  <img src={config.s3Bucket   "/"   organization.logo} />
 </Link >
  

Здесь я передаю объект в параметре ‘data’

Вторая страница

 import React, { useState, useEffect } from 'react';
function UserList({ history, match }) {
const { path } = match;
const { id } = match.params;
const [organization, setOrganization] = useState(null);

// const { data } = this.props.location

useEffect(() => {
    
    // console.log(location.data);

}, []);  }   export { UserList };
  

Я пробовал ‘location.data’ и ‘this.props.location’, но я не могу получить данные, пожалуйста, помогите мне решить эту проблему.

Комментарии:

1. Вы передаете это как реквизит? Я нигде этого не вижу.

2. to={{ pathname: ${path}/users/${organization.id} , data: organization }} , здесь «организация» — это мой объект данных

Ответ №1:

Вы можете сделать это следующим образом

 <Link to={{ pathname: `${path}/users/${organization.id}`, state: organization}}>
   <img src={config.s3Bucket   "/"   organization.logo} />
 </Link >
  

и на второй странице

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

function UserList({ history, match }) {
  const { path } = match;
  const { id } = match.params;
  const [organization, setOrganization] = useState(null);

  const { state } = useLocation();

  useEffect(() => {
    console.log(state);
  }, []);
}   

export { UserList };
  

Комментарии:

1. выдает ошибку «Не удается прочитать свойство «реквизит «неопределенного»

2. О, я забыл, вы используете hooks. проверьте это сейчас. Я отредактировал вторую страницу.

Ответ №2:

используйте withRouter

 import { withRouter } from "react-router-dom"







export default withRouter(ComponentName)