빠른 시작

급하신가요?

TanStack Router를 시작하는 가장 빠른 방법은 새 프로젝트의 뼈대를 생성하는 것입니다. 다음 명령을 실행합니다.

react: @tanstack/cli create --router-only solid: @tanstack/cli create --router-only --framework solid

CLI가 다음 옵션을 포함한 몇 가지 프롬프트를 통해 설정을 맞춤 구성하도록 안내합니다.

• 파일 기반 또는 코드 기반 라우트 구성
• TypeScript 지원
• Tailwind CSS 통합
• 도구 체인 설정
• Git 초기화

완료되면 TanStack Router가 설치되어 바로 사용할 수 있는 새 프로젝트가 생성됩니다.

[!TIP] 사용 가능한 옵션과 템플릿에 대한 자세한 내용은 @tanstack/cli 문서를 참조합니다.

라우팅 옵션

TanStack Router는 파일 기반 및 코드 기반 라우트 구성을 모두 지원합니다. CLI 설정 중 원하는 방식을 지정하거나 다음 명령을 직접 사용할 수 있습니다.

파일 기반 라우트 생성

파일 기반 방식은 대부분의 프로젝트에 권장되는 옵션입니다. 파일 구조에 따라 라우트를 자동으로 생성하므로 성능, 간결성 및 개발자 경험을 가장 잘 조합할 수 있습니다.

자세한 내용은 파일 기반 라우팅 문서 또는 다음을 참조합니다.

React

라이브 예제 살펴보기

Solid

라이브 예제 살펴보기

코드 기반 라우트 구성

프로그래밍 방식으로 라우트를 정의하려면 코드 기반 라우트 구성을 사용할 수 있습니다. 이 방식은 라우팅 로직을 완전히 제어할 수 있게 합니다.

자세한 내용은 코드 기반 라우팅 문서 또는 다음을 참조합니다.

React

라이브 예제 살펴보기

Solid

라이브 예제 살펴보기

어느 방식이든 프로젝트 디렉터리로 이동한 후 개발 서버를 시작합니다.

기존 프로젝트

기존 React 프로젝트에 TanStack Router를 추가하려면 수동으로 설치할 수 있습니다.

요구 사항

TanStack Router를 설치하기 전에 프로젝트가 다음 요구 사항을 충족하는지 확인합니다.

React

• react v18 이상이며 createRoot를 지원합니다.
• react-dom v18 이상입니다.

Solid

• solid-js v1.x.x

[!NOTE] 최상의 개발 경험을 위해 TypeScript(v5.3.x or higher) 사용을 권장하지만 필수는 아닙니다. TypeScript의 최근 마이너 버전 5개를 지원할 예정이지만 최신 버전을 사용하면 잠재적인 문제를 피하는 데 도움이 됩니다.

현재 TanStack Router는 React(ReactDOM 포함) 및 Solid와만 호환됩니다. React Native, Angular 또는 Vue와 같은 다른 프레임워크 지원에 기여하려면 Discord로 문의해 주세요.

설치

프로젝트에 TanStack Router를 설치하려면 선호하는 패키지 관리자로 다음 명령을 실행합니다.

react: @tanstack/react-router solid: @tanstack/solid-router

설치한 후 package.json 파일에서 해당 의존성을 확인해 설치를 검증할 수 있습니다.

React

{
  "dependencies": {
    "@tanstack/react-router": "^x.x.x"
  }
}

Solid

{
  "dependencies": {
    "@tanstack/solid-router": "^x.x.x"
  }
}