React JS如何在Hook中的页面之间传递数据(useEffect)

Question

我试图将一个数据对象传递到另一个页面，但无法在第二个页面上获取数据。下面的代码是我正在使用

第一页通过链接中的数据

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

在这里，我正在传递"数据"参数中的对象

第二页

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"one_answers"this.props.location"，但无法获取数据，请帮助我解决此问题。

Answer 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 };

Answer 2

与路由器一起使用

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



export default withRouter(ComponentName)