Tanstack Router 4

Creating a Router

라우터 객체에 대해 알아봅시다.

Route Class

router를 만들기 위해서는 Router 객체를 만들어야 한다. Router 객체는 Route에서 일어나는 모든 일을 담당한다.

import { createRouter } from '@tanstack/react-router'

const router = createRouter({
  // ...
})

Route Tree

Route Tree라고 불리는 router는 라우트 매칭과 컴포넌트 렌더링을 담당한다.

FileSystem Route Tree

이거 쓰면 src/routeTree.ts를 자동으로 만들어준다. 그냥 쓰자 제발........

Router Type Safety

Tanstack Router는 타입스크립트를 기똥차게 지원한다.이거 제대로 쓰려면 Declaration Merging을 항상 켜놔라.

Not-Found Route

404 페이지는 notFoundRoute를 이용해 생성하자.

File-Based Routing

import { NotFoundRoute } from '@tanstack/react-router'
import { Route as rootRoute } from './routes/__root.tsx'

const notFoundRoute = new NotFoundRoute({
  getParentRoute: () => rootRoute,
  component: () => '404 Not Found',
})

const router = createRouter({
  routeTree,
  notFoundRoute,
})

Route Matching

Tanstack Router는 route tree에서 자동으로 가장 비슷한 라우트에 처음으로 매칭되게 만드는 역할을 한다. 이 말은 route tree를 글씨 순서대로 배열한다는 것을 의미한다.

// Before
Root
  - blog
    - $postId
  	- /
  	- new
  - /
  - *
  - about
  - about/us
  
// After Sorted
Root
  - /
  - about/us
  - about
  - blog
    - /
    - new
    - $postId
  - *

Outlets

Nested routing은 라우터를 계층을 나누어 구성한다는 말이다. Outlet은 이렇게 계층형으로 구성된 라우터를 제공하는 컴포넌트이다.

The Outlet Component

Outlet 컴포넌트는 route와 매칭되는 것을 보여주는 컴포넌트이다. 어떤 props도 받지 않는다. 맞는 route가 없다면 null을 떨어트린다.