[Next.Js] useRouter() 훅의 프로퍼티

asPath

브라우저에서 실제로 보여지는 URL 경로를 나타내는 문자열입니다. 예를 들어, "/blog/post/123"과 같은 형식입니다.

 

**  asPath  더 알기

asPath를 사용하면 현재 페이지의 실제 url 경로를 알 수 있기 때문에, 이를 기반으로 특정 동작을 수행할 수 있습니다. 예를 들어, 특정 경로에서만 컴포넌트를 렌더링하거나, 특정 경로에 따라 다른 데이터를 불러오는 등의 작업을 수행할 수 있습니다.

 

아래는 asPath를 사용하는 간단한 예시입니다.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const path = router.asPath; //asPath 는 현재 경로를 가져온다.

  if (path === '/blog') { // 현재 경로가 /blog 라면 <BlogList/> 컴포넌트를 반환
    return <BlogList />;
  } else if (path.includes('/blog/')) { //경로가 /blog/: 을 포함하면 포스트id 를 반환
    const postId = path.split('/blog/')[1];
    return <BlogPost id={postId} />;
  } else { // 그 밖에 <DefalutPage/> 컴포넌트 반환
    return <DefaultPage />;
  }
}

 위 예시에서는, 현재 페이지의 경로를 asPath로 가져와서, 경로에 따라 다른 컴포넌트를 렌더링하고 있습니다. '/blog' 경로인 경우 BlogList 컴포넌트를 렌더링하고, '/blog/:postId' 경로인 경우, postId를 추출하여 BlogPost 컴포넌트에 전달하고 있습니다. 그 외의 경우에는 DefaultPage 컴포넌트를 렌더링하고 있습니다.

이처럼 asPath를 사용하여 현재 페이지의 경로에 따라 다른 동작을 수행할 수 있습니다.

---

basePath

애플리케이션의 베이스 경로를 나타내는 문자열입니다. 예를 들어, "/my-app"과 같은 형식입니다.

 

---

pathname

현재 페이지의 경로를 나타내는 문자열입니다. 예를 들어, "/blog/post"와 같은 형식입니다.

 

---

query

현재 페이지의 쿼리 매개변수를 나타내는 객체입니다. 예를 들어, "/blog/post?id=123"과 같은 URL에서 query 객체는 { id: "123" }과 같은 형식입니다.

---

route

현재 페이지의 Next.js 라우팅 경로를 나타내는 문자열입니다. 예를 들어, "/blog/[postId]"와 같은 형식입니다.

---

isFallback

현재 페이지가 fallback 페이지인지 여부를 나타내는 부울값입니다. fallback 페이지는 정적 생성이나 서버 사이드 렌더링에서 오류가 발생하여 클라이언트 사이드에서 렌더링하는 페이지를 의미합니다.

 

---

events

라우팅 이벤트에 대한 이벤트 리스너를 등록하고 해제할 수 있는 메서드를 제공하는 객체입니다. routeChangeStart, routeChangeComplete, routeChangeError, beforeHistoryChange, hashChangeStart, hashChangeComplete 이벤트에 대한 이벤트 리스너를 등록하고 해제할 수 있습니다.

 

---

isReady

Next.js 애플리케이션이 초기화되고 렌더링 준비가 완료되었는지 여부를 나타내는 부울값입니다. true일 경우, 애플리케이션이 준비되어 페이지를 렌더링할 수 있습니다.

 

---

prefetch(href, as, options)

다른 페이지를 사전로드(preload)할 수 있는 함수입니다. prefetch 메서드를 사용하여 다른 페이지를 미리 불러와 사용자 경험을 개선할 수 있습니다.

• • href: 사전로드할 페이지의 경로입니다.
  • as (optional): 실제로 노출되는 경로입니다. href와 동일하면 기본값으로 설정됩니다.
  • options (optional): prefetch에 대한 추가 옵션입니다.

---

push(url, as, options)

• 다른 페이지로 이동할 때 사용하는 메서드입니다. push 메서드를 호출하여 페이지를 이동하면, Next.js는 해당 페이지를 먼저 서버에서 렌더링하고, 클라이언트에서 렌더링된 페이지를 다시 가져와서 보여줍니다.
• url: 이동할 페이지의 URL 경로입니다.
• as (optional): 브라우저에서 실제로 보여질 URL 경로입니다. 기본값은 url과 같습니다.
• options (optional): 이동 시 사용할 옵션입니다. replace, shallow 등의 옵션을 사용할 수 있습니다.

---

replace(url, as, options)

• 현재 페이지를 다른 페이지로 대체할 때 사용하는 메서드입니다. push와는 달리, replace 메서드를 호출하여 페이지를 이동하면, 브라우저의 뒤로가기 버튼을 누르면 이전 페이지로 돌아가지 않고 대체된 페이지로 이동합니다.
• url: 이동할 페이지의 URL 경로입니다.
• as (optional): 브라우저에서 실제로 보여질 URL 경로입니다. 기본값은 url과 같습니다.
• options (optional): 이동 시 사용할 옵션입니다. shallow 등의 옵션을 사용할 수 있습니다.

---

reload()

현재 페이지를 새로고침하는 메서드입니다.

---

back()

이전 페이지로 이동하는 메서드입니다. 브라우저의 뒤로가기 버튼과 동일한 역할을 합니다.