usenavigate (2) 썸네일형 리스트형 [Next.js] useLocation, useNavigate, useRouter in Next react-router-dom의 useLocation, useNavigate, useRouter 의 기능을 Next.js에서는 'next/router'의 useRouter 로 구현할 수 있다. import { useRouter } from "next/router"; ... const router = useRouter(); useEffect(() => { if (window.location.href.includes("access_token")) { window.localStorage.setItem( "token", window.location.href.split("=")[1].split("&")[0] ?? "none", ); router.push("/"); } }, []); window.location.href vs useNavigate vs Link window.location.href vs useNavigate useNavigate history모듈에 의존성을 가지고 있고, 이걸로 라우팅을 지원한다. HTTP요청을 새로 하지 않고 안의 내용만 바꾼다. * 뒤로가기버튼을 클릭해도 페이지가 unload되지 않고 내용만 바뀐다. location.href 페이지를 전환하면 HTTP요청을 새로 한다. * 뒤로가기를 클릭하면 페이지가 unload되고 새로운 페이지를 불러온다. Link vs useNavigate useNavigate navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있습니다. 함수 호출을 통해 이동하기 때문에, 이동할 때 조건을 걸 수 있습니다. ex) 로그인이 되어있는 사용자가 My 버튼을 눌렀을 때 -> My p.. 이전 1 다음
