Link, useRouter

Link

next.js의 네비게이션 컴포넌트

import Link from "next/Link";

const Home = () => {
  return(
    <>
      <Link href="Guitar">go to Guitar Category</Link>
      <Link href="Bass">go to Bass Category</Link>
      <Link href="drum">go to Drum Category</Link>
    </>
  )
}

export default Home;

1. Link 컴포넌트의 href prop에 이동하려는 페이지의 상대 경로를 넣는다

2. next에서 Link는 전체 페이지를 불러오는게 아닌, 필요한 부분만 불러오기 때문에 최적화에 용이하다

3. 외부링크를 사용할 땐, 외부링크 전체를 herf의 값으로 넣는다

 

---

useRouter

router 객체에 접근

import { useRouter } from "next/router";

const Home = () => {
  const router = useRouter();
  
  const submit = (e) => {
    e.preventDefault();
    router.push(e.targetp[0].value);
  }
  
  return(
    <form submit={submit}>
      <input />
      <button value="go" />
    </form>
  )
}

console.log(router)

1. push 메서드는 인자로 받은 경로로 이동한다

2. pathname은 호스트, 쿼리 매개변수를 제외한 경로다

3. asPath는 라우팅 링크의 주소가 일치하며, 사용자가 볼 수 있는 URL

4. query는 쿼리 파라미터를 키와 값을 갖는 객체다

 

자주쓰는 useRouter().push()

import { useRouter } from "next/router";

const SomeComponent = () => {
  const router = useRouter();
  const currentPath = router.pathname; // params 까지의 경로를 문자열로 반환
  const currentQuery = router.query; // 현재 쿼리를 키와 값으로 가진 객체를 반환
  const currentAsPath = router.asPath // 현재 경로를 문자열로 반환
  
  return (
    <div>
      <button onClick={() => { router.push("/"); }>navigate</button>
    </div>
  );
};

//push메서드의 인자가 /로 시작하면 절대경로, 그렇지 않으면 상대경로

useRouter().push() 인자를 객체로 사용하기

router.push({
  pathname: router.pathname,
  query: {
    subCategory,
    page
   }
});