[React] useNavigate()로 state전달 후 useLocation()으로 받기

숭글·2022년 6월 13일
0

react

목록 보기
7/10

testPage에서 검사를 진행한 후 결과 유형을 result page에 넘겨줬다.
일회성에다 넘기는 데이터도 하나였기때문에 redux를 사용하는 건 오히려 부담이었다.

그래서 useNavigate()로 경로를 바꿔줄 때, 데이터를 함께 전달했다!

순서는 간단하다!
useNavigate()로 경로를 바꾸며 값을 전달해주면,
useLocation()를 이용해 받으면 된다!

일단 그냥 useLocation()를 사용해보았다.
반환받은 값을 console에 찍어보니

{pathname: '/test/result', search: '', hash: '', state: null, key: 'w6ozm642'}

가 찍혔다.

state으로 값을 전달해주기위해

testPage

let navigator = useNavigate();

navigator('/test/result', {state: {type: result}});

위 코드처럼 result를 전달했고

result page

const type = useLocation().state.type;

이렇게 잘 받았다!

야호

profile
Hi!😁 I'm Soongle. Welcome to my Velog!!!

1개의 댓글

comment-user-thumbnail
2022년 6월 13일

useLocationuseNavigator 를 사용하여 컴포넌트에서 사용하려는 값을 URL parameter 로 받을 수 있도록 구현하신 건가요?

답글 달기