[React] Next JS 동적 라우팅 / Dynamic Routing

 

---

목차

 

동적 라우팅 (Dynamic Routing)

일반적인 사용

주의할 점

Multiple segment

기타 사용 예시

Catch all routes

Optional 하게 사용하기

 

동적 라우팅 (Dynamic Routing)

일반적인 사용

• pages/post/[id].js ⇒ post/1 로 접근가능

 

예시 1

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

export default Post

 

예시 2

• pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query object는 ?

{ "id" : "abc", "test" : "123" }

 

주의할 점

• pages/post/create.js - /post/create 에 매칭됨

• pages/post/[pid].js -  /post/1, /post/abc, 기타 등등에 매칭됨.
  • 하지만!! /post/create 에는 매칭되지 않음, 이미 pages/post/create.js 가 존재하기 때문

 

 

 

Multiple segment

• 여러 segment 를 이용할 수도 있다.

 

사용 예시

• pages/post/[id]/[name] 에 대해 post/123/seo-sang 으로 접근했을 때 갖는 query object는 ?

{ "id" : "123", "name" : "seo-sang" }

 

기타 사용 예시

• url 접근하는것과 동일한 방식으로 next/link 로도 접근이 가능하다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">
          <a>Go to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">
          <a>Also goes to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc/a-comment">
          <a>Go to pages/post/[pid]/[comment].js</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

 

 

Catch all routes

 

📖

일일히 []/[]/[] 형태로 감싸주지 않아도 모든 routing을 잡아낼 수 있다.

• ... 를 이용해서 모든 path 를 잡아낼 수 있다.

 

예시

• pages/post/[...param].js 에 대해 post/1/a/b/c 접근?

{ "param" : ["1", "a", "b", "c"] }

 

Optional 하게 사용하기

 

• 1중 [...param] 은 param 이 없을 경우는 라우팅 되지 않는다.
  • 예를들어, pages/post/[...param] 은 /post/a 는 매칭되지만 /post 에 매칭되지 않습니다!

• 2중 bracket [[...param]] 를 이용하면된다.

 

예시

• pages/post/[[...slug]].js 는 /post, /post/a, /post/a/b 세개 모두 매칭된다.

{ } // GET `/post` (empty object)
{ "slug": ["a"] } // `GET /post/a` (single-element array)
{ "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)

 

 

 

 

 

Uploaded by Notion2Tistory v1.1.0

---

출처 : Next JS 공식문서

---