[Next.js] 라우팅(Routing)

// 라우팅, Routing

- 페이지 간의 이동

- 경로명은 파일명과 일치한다.
   ▪ index.js 파일은 일반적으로 root page 역할을 한다.('/')
   ▪ index.js 파일을 제외하고 다른 파일 이름은 경로 이름으로 사용된다.

- pages 하위의 index.js  > /
- pages 하위의 news.js  > /news

- 중첩 경로는 디렉토리를 생성하하여 디렉토리명/파일명으로 경로가 사용된다.

- pages 하위의 news 하위의 index.js > /news
- pages 하위의 news 하위의 edit.js > /news/edit

---

// 동적 라우팅

- 파일명에 [] 를 사용하면 동적 페이지로 사용된다.

- pages 하위의 news 하위의 [newsID].js 

 

import { useRouter } from 'next/router';

const router = useRouter();
const 변수명 = router.query.파일식별자명;

- useRouter hook을 통해 경로의 params를 받을 수 있다.

---

- 별도의 hook을 사용하지 않고 props.params를 통해서도 경로의 params를 받을 수 있다. (searchParams도!!)

---

// 페이지 이동

import Link from 'next/link';

<Link href="경로"></Link>

- SPA를 구현하기 위해서는 일반 a 태그가 아닌 Link 를 활용해야 한다.

---

import Link from 'next/link';

function NewsPage() {
  return (
    <>
      <h1>The News Page</h1>
      <ul>
        <li>
          <Link href="/news/nextjs-is-a-great-framework">
            NextJS Is A Great Framework
          </Link>
        </li>
        <li>
          <Link href="/news/something-else">Something Else</Link>
        </li>
      </ul>
    </>
  );
}

export default NewsPage;

---

- 프로그래밍적으로 경로를 변경하려면 useRouter hook을 사용한다.

const router = useRouter();
router.push('경로');