React JS Cara melewatkan data antar halaman di Hook (useEffect)

Question

Saya mencoba meneruskan satu objek data ke halaman lain, tetapi saya tidak dapat mengambil data di halaman kedua. kode di bawah ini yang saya gunakan

Halaman pertama meneruskan data di LINK

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

Di sini saya meneruskan objek dalam parameter 'data'

Halaman kedua

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

Saya telah mencoba 'location.data' dan 'this.props.location' tetapi saya tidak dapat mengambil datanya, tolong bantu saya untuk menyelesaikan masalah ini.

Answer 1

Anda bisa melakukannya seperti ini

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

dan di Halaman Kedua

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

gunakan withRouter

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







export default withRouter(ComponentName)