[NextJS] 페이지 이동 router.push

💻 useRouter

NextJS에서 함수형식으로 라우팅 할 수 있게 해주는 Next.js기본 라이브러리

🖤 자주 사용하는 useRouter기능

✔ router.push(URL)

해당 URL로 이동한다.

• 사용법

<script>
// next.js 프로젝트 내부

import { useRouter } from "next.router"

export default function Push(){
  // 라우터 가져오기
  const router = useRouter();
  
  // 클릭시 "/" 경로로 이동하는 버튼
  return <>
    <input type="button" onClick={() => router.push("/") } value="Push"/>
  </>
}
</script>

<script>
import { useRouter } from "next.router"

export default function Exam(){
  const router = useRouter();
  
  // 클릭시 "/" 경로로 이동하며, query로 url에 정보를 담아준다.
  return <>
    <input type="button" onClick={() => router.push({
      pathname: "/",
      query: {
        name: "gyultang",
        age: "20"
      }
    }) } value="Push"/>
  </>
}
</script>

• 적용 예시 2

<script>
import { useRouter } from "next/router";

export default function Home({ results }) {
    const router = useRouter();
    // onClick시 실행될 함수
    const onClick = (id, title) => {
    // router.push사용
        router.push(
            {	// 현재경로
                pathname: `/movies/${id}`,
                // 동적경로
                query: {
                    title,
                },
            },
            `/movies/${id}`
        );
    };
    console.log(results);
    return (
        <div className="container">
            <Seo title="Home" />

            {results?.map((item) => (
                <div onClick={() => onClick(item.id, item.original_title)} className="movie" key={item.id}>
                    <img style={{ width: "300px", height: "450px" }} src={`https://image.tmdb.org/t/p/w500${item.poster_path}`} />
                    <h4>
                        <Link
                            href={{
                                pathname: `/movies/${item.id}`,
                                query: {
                                    title: item.original_title,
                                },
                            }}
                            as={`/movies/${item.id}`}
                        >
                            {item.original_title}{" "}
                        </Link>
                    </h4>
                </div>
            ))}
</script>

코드설명
영화 api를 가져와 영화 포스터를 클릭하면 해당 영화 디테일 페이지로 이동된다.

router.push
router.push(url, as, options)
클라이언트 측 전환을 처리한다. next/link가 제대로 되지 않을 경우에 유용하게 쓰일 수 있다.
-url: UrlObject | String 탐색할 URL속성
-as:UrlObject | String 브라우저 URL표시줄에 표시될 경로에 대한 선택적 데코레이터이다. NextJS 9.5.3이전에는 동적경로에 사용되었다.

❗ 미리정의된 경로인 경우
pages/about.js

<script>
import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click !!!!
    </button>
  )
}
</script>

❗ 동적 경로인 탐색
pages/post/[pid].js

<script>
import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/post/abc')}>
      Click !!!!
    </button>
  )
}
</script>

❗ 로그인 뒤에 있는 페이지로 이동
pages/login.js

<script>
import { useEffect } from 'react'
import { useRouter } from 'next/router'
 
// Here you would fetch and return the user
const useUser = () => ({ user: null, loading: false })
 
export default function Page() {
  const { user, loading } = useUser()
  const router = useRouter()
 
  useEffect(() => {
    if (!(user || loading)) {
      router.push('/login')
    }
  }, [user, loading])
 
  return <p>Redirecting...</p>
}
</script>

🖤 router.push 적용

• index.js

<script>
import { useRouter } from "next/router";

export default function Home({ results }) {
    const router = useRouter();
    // onClick시 실행될 함수
    const onClick = (id, title) => {
    // router.push사용
        router.push(
            {	// 현재경로
                pathname: `/movies/${id}`,
                // 동적경로
                query: {
                    title,
                },
            },
            `/movies/${id}`
        );
    };
    console.log(results);
    return (
        <div className="container">
            <Seo title="Home" />

            {results?.map((item) => (
                <div onClick={() => onClick(item.id, item.original_title)} className="movie" key={item.id}>
                    <img style={{ width: "300px", height: "450px" }} src={`https://image.tmdb.org/t/p/w500${item.poster_path}`} />
                    <h4>
                        <Link
                            href={{
                                pathname: `/movies/${item.id}`,
                                query: {
                                    title: item.original_title,
                                },
                            }}
                            as={`/movies/${item.id}`}
                        >
                            {item.original_title}{" "}
                        </Link>
                    </h4>
                </div>
            ))}
</script>

코드설명
영화 api를 가져와 영화 포스터를 클릭하면 해당 영화 디테일 페이지로 이동된다.

✔ 결과

영화 아이템을 누르면

페이지가 이동된것을 확인할 수 있다.
동적 경로로 이동시켜 [id].js파일을 생성한 뒤 아래의 코드로 디테일 페이지를 만들어줬다.

<script>
import { useRouter } from "next/router";

export default function Detail() {
    const router = useRouter();
    console.log(router);
    return (
        <div>
            <h4>{router.query.title || "Loading..."}</h4>
        </div>
    );
}
</script>

🍀 마무리

페이지이동 방법이 리액트보다 간단한것같다. nextJS로 프로젝트를 진행할시에 유용하게 쓸수있을 거같다.