Next.js에서 페이지 이동을 하려면?

총 네가지의 방법이있다. 

 

1. Link 

아래처럼 href에 이동하고자 하는 경로를 입력하면 클릭시 라우터로 이동한다.

import Link from 'next/link'

export default function MyApp() {
  return (
    <div>
          <Link href={'/mypage'}>
            <a>마이페이지</a>
          </Link>
    </div>
  )
}

 

또한 객체를 실어보낼 수 있다.

import Link from 'next/link'

export default function MyApp() {
  return (
    <div>
          <Link
            href={{
              pathname: '/mypage',
              query: { username: 'cheri' },
            }}
          >
            <a>마이페이지</a>
          </Link>
    </div>
  )
}

 

2. useRouter

next.js에서 제공하는 useRouter 훅을 이용하면 라우터객체를 사용할 수 있다. 

import {useRouter} from 'next/router'

export default function myApp(){
	const router = useRouter();
    
    return (
    	<a onClick={()=>router.push('/mypage')}/>
        )
}

 

아래는 useRouter 사용 시 얻을 수 있는 객체이다. pathname을 통하여 경로를 얻을 수 있고, push를 통해 이동이 가능하다.

 

아래와 같은 이벤트들도 적재적소에 활용해보면 좋을 듯 하다.

• beforePopState() : 라우터가 작동하기 전에 무언가를 해야할 때 사용
• routeChangeStart() : 경로가 변경되기 시작할 때 발생
• routeChangeComplete() : 경로가 완전히 변경되면 발생
• routeChangeError() : 경로 변경 시 오류가 발생하거나 경로 로드가 취소되면 발생
• beforeHistoryChange() : 브라우저의 기록을 변경하기 전에 실행
• hashChangeStart() : 해시는 변경되지만 페이지는 변경되지 않을 때 발생
• hashChangeComplete : 해시가 변경되었지만 페이지가 변경되지 않은 경우 발생

 

3. router

useRouter처럼 next/router에서 import 해와서 사용할 수 있다. 

https://nextjs.org/docs/api-reference/next/router

import router from "next/router";

const myApp = () => {
  return (
    <div>
      <button onClick={() => router.push("/")}>클릭</button>
    </div>
  );
};

export default myApp;

 

4. withRouter

useRouter처럼 라우터객체를 얻을 수 있다.