React JS Come passare dati tra le pagine in Hook (useEffect)

Aug 21 2020

Sto tentando di passare un oggetto dati a un'altra pagina, ma non riesco a recuperare i dati nella seconda pagina. sotto il codice è che sto usando

La prima pagina passa i dati in LINK

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

Qui sto passando l'oggetto nel parametro 'data'

Seconda pagina

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

Ho provato "location.data" e "this.props.location" ma non riesco a recuperare i dati, per favore aiutami a risolvere questo problema.

Risposte

5 spycbanda Aug 21 2020 at 17:42

Puoi farlo in questo modo

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

e nella seconda pagina

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 };
MA2WEB Aug 21 2020 at 17:48

utilizzare con Router

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







export default withRouter(ComponentName)