useRouter()는 Next.js에서 제공하는 Hook입니다. 이 Hook은 현재 페이지의 경로와 쿼리 매개변수(query parameters) 등의 정보에 액세스할 수 있는 라우터 객체를 반환합니다.
const router = useRouter();
위의 코드는 useRouter()를 사용하여 router 변수에 라우터 객체를 할당하는 예시입니다.
이제 router 객체를 사용하여 페이지의 경로와 쿼리 매개변수를 액세스하거나, 페이지 이동 등의 다양한 작업을 수행할 수 있습니다.
현재 경로 가져오기:
const currentPath = router.pathname;
router.pathname은 현재 페이지의 경로를 반환합니다. 예를 들어, "/users"라는 경로를 가진 페이지라면 currentPath는 "/users"가 됩니다.
쿼리 매개변수 가져오기:
const queryParam = router.query.paramName;
router.query는 쿼리 매개변수 객체를 나타냅니다. 예를 들어, "/users?id=123"라는 경로를 가진 페이지에서 queryParam은 "123"이 됩니다.
다른 페이지로 이동하기:
router.push('/new-page');
router.push()는 주어진 경로로 페이지를 이동합니다. 위의 예시는 "/new-page"로 이동하는 것을 의미합니다.
현재 경로에 쿼리 매개변수 추가하여 이동하기:
router.push({
pathname: '/new-page',
query: { id: '123' }
});
router.push()를 사용하여 다른 페이지로 이동할 때, query 객체를 함께 전달하여 쿼리 매개변수를 추가할 수 있습니다. 위의 예시는 "/new-page?id=123"로 이동하는 것을 의미합니다.
물론, 이 외에도 router 객체에는 다양한 메서드와 속성이 있으며, 이를 사용하여 페이지 라우팅과 관련된 작업을 수행할 수 있습니다.