useNavigate from react-router-dom gave emtpy array?

Question

Im trying to figure out what the heck is going here with my code. The state that I want to pass after logging in the user are all correct in the SignInPage but when it navigate to HomePage the achievements array becomes empty.

Here's the code for my SignIn Page:

export default function SignIn(){
   
     const navigate = useNavigate();

     return(
       <Button
                onClick={ async ()=>{
                    const response = await signInUser(signInEmailRef.current.value, signInPasswordRef.current.value)
                    console.log('state after click: ', response)
 
                    navigate('/UserHomePage', {state: response })
                }}
                    sx={{
                        p: 1,
                        width: '200px',
                        backgroundColor: 'orange',
                        fontSize: '20px',
                        fontWeight: 'bold',
                        color: 'white',
                        borderRadius: '15px',
                        '&:hover': {
                            color: 'orange'
                        }
                    }}>
                    SignIn
                </Button>
     );

}

Here's the code for my HomePage:

export default function HomePage(){

       const { state } = useLocation();

       useEffect(() => {

           console.log('state at home page: ', state);
 
       }, [])


       return(
          <Box></Box>
       );
}

my console.logs:

 state after click:  
 Object { childName: "child doe", email: "[email protected]", userId: some_user_id, phone: "8888888888", parentsName: "johnny doe", achievements: [ some_link_to_img_one, some_link_to_img_two, some_link_to_img_three] }

 state at home page:  
 Object { childName: "child doe", email: "[email protected]", userId: some_user_id, phone: "8888888888", parentsName: "johnny doe", achievements: [] } 
 achievements: Array []
 length: 0

​ anyone has any idea what is going on here? why does the array has the items I wanted after making the API call but becomes empty when i navigate over to my HomePage?

Answer 1

Try use <Link> instead of navigate().

<Link to='/UserHomePage' state={response}>
  <Button>...</Button>
</Link>