[Next.js] Router 정리

1) next/router

import { useRouter } from "next/router";

const router = useRouter();

Next.js에서 라우터를 사용하려면 useRouter 훅을 사용해서 router 객체에 접근할 수 있습니다.

(참고로, useRouter 는 리액트 훅 이므로 클래스 컴포넌트 내에서 사용 불가합니다.)

 

라우터에서 자주 사용하는 메서드

• router.push
• router.replace
• router.prefetch
• router.beforePopState
• router.back
• router.reload
• router.events

2) router.push()

router.push(url, as, options)

• url: [필수] 라우팅 하려는 url
• as: [선택] 브라우저 url 바에 보여지는 path
• options: [선택] ]scroll(라우팅 후 스크롤업), shallow, locale 등의 옵션이 있습니다.

🚨 주의: router.push는 외부 url 사용시에는 적합하지 않습니다. a tag의 target="_blank" 를 사용하거나 window.location을 사용하는 것이 낫습니다.

client-side 전환을 할 수 있도록 도와주고 next/link 대신 사용할 수 있습니다.

router.push는 라우터 히스토리 스택에 새로운 url을 쌓아줍니다.

 

예를 들어 home > login > item 순으로 페이지를 이동했을 때, router.push를 사용해 'mypage'로 이동한다면 라우터 히스토리 스택에는 home > login > item > mypage가 쌓입니다. 마지막 페이지에서 뒤로가기를 누르면 'item' 페이지로 되돌갑니다.

 

3) router.replace()

router.replace(url, as, options)

• url: [필수] 라우팅 하려는 url
• as: [선택] 브라우저 url 바에 보여지는 path
• options: [선택] ]scroll(라우팅 후 스크롤업), shallow, locale 등의 옵션이 있습니다.

router.push와 비슷하게 동작하지만, 라우터 히스토리 스택에 새로운 url을 추가하지 않습니다.

대신 router.replace는 기존에 있던 현재 페이지 route를 새로운 url로 대체합니다.

 

예를 들어, home > login > item 순으로 페이지를 이동했을 때, router.replace를 사용해 'mypage'로 이동한다면 라우터 히스토리 스택에는 현재 페이지인 item이 mypage로 대체됩니다.

즉, home > login > mypage가 쌓입니다. 마지막 페이지에서 뒤로가기를 누르면 'login' 페이지로 되돌아갑니다.

 

4) router.push vs router.replace 정리

router.push : 라우터의 history 스택의 제일 위에 새로운 url을 쌓는다.

router.replace : 스택 제일 위에 있는 원소를 새로운 url로 대체한다.

 

따라서 이전의 라우팅 히스토리를 모두 유지하고자 할땐 router.push, 현재 라우팅 히스토리를 다른 url로 대체하고 싶다면 router.replace를 사용할 수 있다.

 

5) router.back()

히스토리에서 전단계로 이동합니다. 브라우저의 'back'버튼을 누르는 것과 동일하게 동작합니다.

👉🏻 window.history.back()와 같이 동작합니다.