본문으로 건너뛰기

TanStack Router를 사용하기 위해 @tanstack/history API 자체를 알아야 하는 것은 아니지만, 작동 방식을 이해하는 것이 좋습니다. 내부적으로 TanStack Router는 라우팅 기록을 관리하기 위해 history 추상화를 필요로 하며 사용합니다.

히스토리 인스턴스를 만들지 않으면 라우터가 초기화될 때 이 API의 브라우저용 인스턴스가 생성됩니다. 특별한 히스토리 API 타입이 필요하면 @tanstack/history 패키지를 사용해 직접 만들 수 있습니다.

  • createBrowserHistory: 기본 히스토리 타입입니다.
  • createHashHistory: 해시를 사용해 기록을 추적하는 히스토리 타입입니다.
  • createMemoryHistory: 기록을 메모리에 유지하는 히스토리 타입입니다.

히스토리 인스턴스를 만들면 Router 생성자에 전달할 수 있습니다.

<!-- ::start:framework -->

React

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

const memoryHistory = createMemoryHistory({
  initialEntries: ['/'], // Pass your initial url
})

const router = createRouter({ routeTree, history: memoryHistory })

Solid

import { createMemoryHistory, createRouter } from '@tanstack/solid-router'

const memoryHistory = createMemoryHistory({
  initialEntries: ['/'], // Pass your initial url
})

const router = createRouter({ routeTree, history: memoryHistory })

<!-- ::end:framework -->

브라우저 라우팅​

createBrowserHistory는 기본 히스토리 타입입니다. 브라우저의 history API를 사용해 브라우저 기록을 관리합니다.

해시 라우팅​

서버가 HTTP 요청에 대해 index.html로 다시 쓰기를 지원하지 않는 경우(서버가 없는 환경 등) 해시 라우팅이 유용할 수 있습니다.

<!-- ::start:framework -->

React

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

const hashHistory = createHashHistory()

const router = createRouter({ routeTree, history: hashHistory })

Solid

import { createHashHistory, createRouter } from '@tanstack/solid-router'

const hashHistory = createHashHistory()

const router = createRouter({ routeTree, history: hashHistory })

<!-- ::end:framework -->

메모리 라우팅​

메모리 라우팅은 브라우저가 아닌 환경이나 컴포넌트가 URL과 상호 작용하지 않도록 하려는 경우에 유용합니다.

<!-- ::start:framework -->

React

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

const memoryHistory = createMemoryHistory({
  initialEntries: ['/'], // Pass your initial url
})

const router = createRouter({ routeTree, history: memoryHistory })

Solid

import { createMemoryHistory, createRouter } from '@tanstack/solid-router'

const memoryHistory = createMemoryHistory({
  initialEntries: ['/'], // Pass your initial url
})

const router = createRouter({ routeTree, history: memoryHistory })

<!-- ::end:framework -->

서버 사이드 렌더링을 위해 서버에서 사용하는 방법은 SSR 가이드를 참고합니다.