수동 설정

React 프로젝트에서 TanStack Router를 수동으로 설정하려면 다음 단계를 따릅니다. 다음 단계는 파일 기반 라우트 생성과 코드 기반 라우트 구성을 모두 사용해 TanStack Router를 시작하는 데 필요한 최소 설정을 제공합니다.

파일 기반 라우트 생성 사용

TanStack Router, Vite 플러그인 및 Router Devtools 설치

필요한 핵심 의존성을 설치합니다.

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

필요한 개발 의존성을 설치합니다.

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

Vite 플러그인 구성

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
    react(),
    // ...,
  ],
})

[!TIP] Vite 또는 지원되는 번들러를 사용하지 않는다면 자세한 내용은 TanStack Router CLI 가이드를 참조합니다.

다음 파일을 만듭니다.

• src/routes/__root.tsx (with two '_' characters)
• src/routes/index.tsx
• src/routes/about.tsx
• src/main.tsx

React

src/routes/__root.tsx

import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

const RootLayout = () => (
  <>
    <div className="p-2 flex gap-2">
      <Link to="/" className="[&.active]:font-bold">
        Home
      </Link>{' '}
      <Link to="/about" className="[&.active]:font-bold">
        About
      </Link>
    </div>
    <hr />
    <Outlet />
    <TanStackRouterDevtools />
  </>
)

export const Route = createRootRoute({ component: RootLayout })

src/routes/index.tsx

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

export const Route = createFileRoute('/')({
  component: Index,
})

function Index() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
    </div>
  )
}

src/routes/about.tsx

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

export const Route = createFileRoute('/about')({
  component: About,
})

function About() {
  return <div className="p-2">Hello from About!</div>
}

src/main.tsx

import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

// Render the app
const rootElement = document.getElementById('root')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  )
}

Solid

src/routes/__root.tsx

import { createRootRoute, Link, Outlet } from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

const RootLayout = () => (
  <>
    <div class="p-2 flex gap-2">
      <Link to="/" class="[&.active]:font-bold">
        Home
      </Link>{' '}
      <Link to="/about" class="[&.active]:font-bold">
        About
      </Link>
    </div>
    <hr />
    <Outlet />
    <TanStackRouterDevtools />
  </>
)

export const Route = createRootRoute({ component: RootLayout })

src/routes/index.tsx

import { createFileRoute } from '@tanstack/solid-router'

export const Route = createFileRoute('/')({
  component: Index,
})

function Index() {
  return (
    <div class="p-2">
      <h3>Welcome Home!</h3>
    </div>
  )
}

src/routes/about.tsx

import { createFileRoute } from '@tanstack/solid-router'

export const Route = createFileRoute('/about')({
  component: About,
})

function About() {
  return <div class="p-2">Hello from About!</div>
}

src/main.tsx

/* @refresh reload */
import { render } from 'solid-js/web'
import { RouterProvider, createRouter } from '@tanstack/solid-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/solid-router' {
  interface Register {
    router: typeof router
  }
}

// Render the app
const rootElement = document.getElementById('root')!

render(() => <RouterProvider router={router} />, rootElement)

@tanstack/router-plugin 패키지를 사용해 npm run dev/npm run build 스크립트를 실행하든, 패키지 스크립트에서 tsr watch/tsr generate 명령을 수동으로 실행하든 라우트 트리 파일은 src/routeTree.gen.ts에 생성됩니다.

이 패턴을 사용한다면 index.html 파일의 루트 <div>의 id를 <div id='root'></div>로 변경해야 합니다.

코드 기반 라우트 구성 사용

[!IMPORTANT] 다음 예시는 코드를 사용해 라우트를 구성하는 방법을 보여주며, 이 데모에서는 간단하게 하나의 파일에 작성합니다. 코드 기반 생성을 사용하면 하나의 파일에 여러 라우트와 라우터 인스턴스까지 선언할 수 있지만, 애플리케이션이 성장하면 더 나은 구성과 성능을 위해 라우트를 별도의 파일로 나누는 것을 권장합니다.

React

import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import {
  Outlet,
  RouterProvider,
  Link,
  createRouter,
  createRoute,
  createRootRoute,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

const rootRoute = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-2">
        <Link to="/" className="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" className="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: function Index() {
    return (
      <div className="p-2">
        <h3>Welcome Home!</h3>
      </div>
    )
  },
})

const aboutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: function About() {
    return <div className="p-2">Hello from About!</div>
  },
})

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])

const router = createRouter({ routeTree })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  )
}

Solid

/* @refresh reload */
import { render } from 'solid-js/web'
import {
  Outlet,
  RouterProvider,
  Link,
  createRouter,
  createRoute,
  createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

const rootRoute = createRootRoute({
  component: () => (
    <>
      <div class="p-2 flex gap-2">
        <Link to="/" class="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" class="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: function Index() {
    return (
      <div class="p-2">
        <h3>Welcome Home!</h3>
      </div>
    )
  },
})

const aboutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: function About() {
    return <div class="p-2">Hello from About!</div>
  },
})

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])

const router = createRouter({ routeTree })

declare module '@tanstack/solid-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!
render(() => <RouterProvider router={router} />, rootElement)

이 예시를 대충 훑어보았거나 이해하지 못한 부분이 있어도 괜찮습니다. TanStack Router를 제대로 활용하려면 배울 내용이 훨씬 더 많기 때문입니다. 계속 진행합니다.