[개발일지] useLocation,useNavigate

Yoongja·2022년 6월 21일
post-thumbnail

test페이지에서 도출된 결과물을 result로 navigate할때 prop을 함께 묶어서 보내는 방법이 필요했고 구글링하다 useLocation 훅을 알게되었다
그래서 두가지를 정리해보자 !

useNavigate
useNavigate 후크는 react-router-dom 버전 6에서만 사용할 수 있다. useNavigate 훅을 사용하여 이전 및 다음 페이지로 리디렉션할 수 있다.

useLocation
useLocation 훅을 위해선 위해 두 개의 라이브러리 React 16.8+ 및 react-router-dom 5.1+가 필요하다. 현재 URL에 대한 정보를 담고 있는 위치 객체를 반환하는 함수이다. URL이 변경될 때마다 새로운 위치 객체가 생성된다.

-Test.js

navigate해당 부분을 보면 state를 보낸다

-Result.js


버튼클릭 결과를 변수로 받아와서결과창에 예쁘게 띄우는 것 까지 완료 했다 이제 css 를 본격적으로 입혀보자

  • 내가 겪은 문제 :
    원래는 useNavigate가 아닌 onClick이벤트로 Link to를 적용하였다 하지만 이동이 되지 않았다,,
profile
Belief in the possibility

0개의 댓글