React JS Hook의 페이지간에 데이터를 전달하는 방법 (useEffect)

Question

한 데이터 개체를 다른 페이지로 전달하려고하는데 두 번째 페이지에서 데이터를 가져올 수 없습니다. 아래 코드는 내가 사용하고 있습니다

첫 페이지는 LINK의 데이터를 전달합니다.

 <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'을 시도했지만 데이터를 가져올 수 없습니다.이 문제를 해결하도록 도와주세요.

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

withRouter 사용

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







export default withRouter(ComponentName)