Vite에서 TanStack Router 시작하기

Vite Plugin & Devtool 설치

npm install --save-dev @tanstack/router-plugin @tanstack/router-devtools

vite.config.ts 설정

import { defineConfig } from 'vite'
import viteReact from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [
    TanStackRouterVite(),
    viteReact(),
    ...,
  ],
})

main.tsx

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

const router = createRouter({ routeTree });

declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router;
    }
}
const rootElement = document.getElementById('root')!;
if (!rootElement.innerHTML) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <StrictMode>
            <RouterProvider router={router} />
        </StrictMode>
    );
}

Route 파일 생성

src/route 경로에 다음 파일들을 생성한다.

해당 경로에서 생성한 디렉토리 구조에 따라 path가 결정되므로 이를 고려하여 폴더와 파일을 생성한다.

📝__root.tsx

🗨️ 루트 라우터가 되는 파일로 필수적으로 생성해주어야 한다.

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

export const Route = createRootRoute({
    component: () => (
        <>
            <div className='p-2 flex gap-2'>
                <Link to='/'>Home</Link>
                <Link to='/hello'> </Link> {/* 사용자 설정 path */}
            </div>
            <Outlet />
            <TanStackRouterDevtools />
        </>
    ),
});

📝index.lazy.tsx

🗨️ 해당 path의 기본 컴포넌트가 되는 index 파일이며 특정 경로가 인덱스 라우트를 필요로 하지 않는 경우 필수적인 요소는 아니다.

import { createLazyFileRoute } from '@tanstack/react-router';

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

function Index() {
    return (
        <div className='p-2 bg-[honeydew]'>
            <h3>Welcome 🏠!</h3>
        </div>
    );
}

💡 .lazy.tsx 파일은 메인 번들과 분리되어 메인 번들의 크기를 최소화하고 별도의 번들로 로드되어 초기 로드 성능을 향상시킨다.

그 외 페이지 컴포넌트

🗨️ 파일명은 path가 되어 routTree.gen.ts에 자동 등록된다.

import { createLazyFileRoute } from '@tanstack/react-router';

export const Route = createLazyFileRoute('/hello')({
    component: Hello,
});

function Hello() {
    return <div className='p-2 bg-[pink]'>Hello!!😸🖐️</div>;
}

등록 완료 : routeTree.gen.ts

아래와 같이 routeTree.gen.ts에 잘 등록되었다면 성공적으로 등록 완료!

npm run dev