Next.js useRouter 사용 방법

Hong·2022년 6월 10일
0

useRouter

Next.js에서 함수 형식으로 라우팅 할 수 있게 해주는 Next.js 기본 라이브러리로 React에서 useNavigate 또는 useHistory와 같은 역할을 한다.

useRouter 사용법

1. router.push()

<첫번째 방법>

import { useRouter } from "next/router"

const PushPage = () => {
    const router = useRouter();
    useEffect(() => {
        setTimeout(() => {
            router.push("/");
        }, 5000);
    }, []);
}

export default PushPage;

<두번째 방법>

import { useRouter } from "next/router"

const PushPage = () => {
    const router = useRouter();
    
    return (
    	<div>
            <button onClick={() => router.push({
                pathname: "/",
                query: {
                    name: "john",
                    age: "19",
                },
            })} value="Push">
                버튼
            </button>
        </div>
    )
}

export default PushPage;


위와 같이 사용하며 router.push(URL) 형식으로 해당 URL로 이동한다. 또한 버튼 클릭시 "/" 경로로 이동하며, query로 url에 정보를 담아준다.

2. router.replace()

import { useRouter } from "next/router"

const ReplacePage = () => {
    const router = useRouter();
    
    return (
    	<div>
            <button onClick={() => router.replace("/", "/replace")} value="Push">
                버튼
            </button>
        </div>
    )
}

export default ReplacePage;

위와 같이 router.replace(URL1, URL2) 형식으로 URL1으로 이동후, URL2로 주소만 변경한다.

profile
코딩 배우기

0개의 댓글