Oops, All Code!/🛠 Oops, My Code!

[React] useLocation을 사용했는데 state가 자꾸 null로 반환됐다.

밍동망동 2024. 5. 25. 23:15
import { useLocation } from 'react-router-dom';

function Detail() {
  const location = useLocation();
  console.log(location); // 전달된 상태 출력
  return <span>hello</span>;
}

export default Detail;
<Link
    to={{
       pathname: '/movie-detail',
       state: { year, title, summary, poster, genres },
    }}
>

 

자꾸 null로 반환되어 미칠 뻔하면서 헤딩했는데

 

useNavigate v6.23.1 | React Router

 

reactrouter.com

공식 문서까지 가게 됐다.

 

요즘 공식 문서 등한시하던 젊은 코더,

여기서 패배하다.

 

 

그 결과 Link to 부분을 수정하여 해결했다.

<Link
   to={'/movie-detail'}
   state={{ year, title, summary, poster, genres }}
>

 

 

 

Thanks To

 

[문제] useNavigate()의 state값이 null인 경우

[문제] useNavigate()의 state값이 null인 경우 'react-router-dom'의 useNavigate() 함수 navigate의 state를 통해 data를 보냈는데 state값이 계속 null이 나옵니다. stackoverflow: '경로 상태에서 전송된 값은 직렬화 가능

gwpaeng.tistory.com