const router = useRouter();

Chan·2023년 7월 13일

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 객체에는 다양한 메서드와 속성이 있으며, 이를 사용하여 페이지 라우팅과 관련된 작업을 수행할 수 있습니다.

profile
One Day + 1% 개발기록

0개의 댓글