Docs
Guide
History Types

History Types

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

만약 별도의 history 인스턴스를 생성하지 않으면, 라우터가 초기화될 때 브라우저 기반의 인스턴스가 자동으로 생성됩니다. 특별한 history API 타입이 필요한 경우, @tanstack/history 패키지를 사용하여 직접 생성할 수 있습니다:

  • createBrowserHistory: 기본 history 타입입니다.
  • createHashHistory: 해시를 사용하여 history를 추적하는 타입입니다.
  • createMemoryHistory: 메모리 내에서 history를 유지하는 타입입니다.

history 인스턴스를 생성한 후에는 이를 Router 생성자에 전달할 수 있습니다:

import { createMemoryHistory, createRouter } from "@tanstack/react-router";
 
const memoryHistory = createMemoryHistory({
  initialEntries: ["/"], // 초기 URL을 전달합니다.
});
 
const router = createRouter({ routeTree, history: memoryHistory });

Browser Routing

createBrowserHistory는 기본 history 타입입니다. 브라우저의 history API를 사용하여 브라우저 history를 관리합니다.

Hash Routing

Hash Routing은 서버가 HTTP 요청에 대해 index.html로의 리라이트를 지원하지 않거나, 서버가 없는 환경에서 유용할 수 있습니다.

import { createHashHistory, createRouter } from "@tanstack/react-router";
 
const hashHistory = createHashHistory();
 
const router = createRouter({ routeTree, history: hashHistory });

Memory Routing

Memory Routing은 브라우저 환경이 아닌 곳에서나, 컴포넌트가 URL과 상호작용하지 않도록 하고 싶을 때 유용합니다.

import { createMemoryHistory, createRouter } from "@tanstack/react-router";
 
const memoryHistory = createMemoryHistory({
  initialEntries: ["/"], // 초기 URL을 전달합니다.
});
 
const router = createRouter({ routeTree, history: memoryHistory });

서버 사이드 렌더링을 위한 서버에서의 사용 방법은 SSR Guide를 참조하세요.

Custom Search Param SerializationRouter Context