TanStack Router Và Lazy Loading: Cặp Đôi 'Lười' Mà Chất!

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  component: HomeComponent,
});

function HomeComponent() {
  return <div>Home page</div>;
}

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

export const Route = createLazyFileRoute("/settings")({
  component: SettingsComponent,
});

function SettingsComponent() {
  return <div>Settings page</div>;
}

dist/
  ├── assets/
  │   ├── index-[hash].js          // Code critical (home, router logic,...)
  │   ├── index-[hash].css         // CSS chung (nếu có)
  │   └── settings.lazy-[hash].js  // Code lazy của trang /settings
  ├── index.html

#!/bin/bash

# Tên dự án
PROJECT_NAME="my-tanstack-router-app"

# Kiểm tra xem npm có được cài đặt không
if ! command -v npm &> /dev/null; then
    echo "npm không được cài đặt. Vui lòng cài đặt Node.js và npm trước."
    exit 1
fi

# Tạo dự án React với Vite
echo "Đang tạo dự án React với Vite..."
npm create vite@latest $PROJECT_NAME -- --template react-ts
cd $PROJECT_NAME || exit

# Cài đặt dependencies
echo "Đang cài đặt dependencies..."
npm install @tanstack/react-router @tanstack/router-plugin

# Cấu hình vite.config.ts
echo "Đang cấu hình vite.config.ts..."
cat > vite.config.ts << 'EOL'
import { defineConfig } from 'vite'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    TanStackRouterVite(),
    react(),
  ],
})
EOL

# Tạo cấu trúc thư mục routes
echo "Đang tạo cấu trúc thư mục routes..."
mkdir -p src/routes

# Tạo file __root.tsx
echo "Đang tạo file src/routes/__root.tsx..."
cat > src/routes/__root.tsx << 'EOL'
import { Outlet, createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <div>
      <h1>Ứng dụng TanStack Router</h1>
      <Outlet />
    </div>
  )
}
EOL

# Tạo file index.tsx
echo "Đang tạo file src/routes/index.tsx..."
cat > src/routes/index.tsx << 'EOL'
import { createFileRoute } from '@tanstack/react-router'

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

function HomeComponent() {
  return <div>Home page</div>
}
EOL

# Tạo file settings.tsx
echo "Đang tạo file src/routes/settings.tsx..."
cat > src/routes/settings.tsx << 'EOL'
import { createFileRoute } from '@tanstack/react-router'

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

function SettingsComponent() {
  return <div>Settings page</div>
}
EOL

# Cập nhật file App.tsx
echo "Đang cập nhật file src/App.tsx..."
cat > src/App.tsx << 'EOL'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

const router = createRouter({ routeTree })

function App() {
  return <RouterProvider router={router} />
}

export default App
EOL

# Cập nhật file main.tsx
echo "Đang cập nhật file src/main.tsx..."
cat > src/main.tsx << 'EOL'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
EOL

# Xóa các file không cần thiết (nếu có)
rm -f src/App.css src/assets/react.svg

# Cập nhật index.css (tùy chọn)
echo "Đang cập nhật file src/index.css..."
cat > src/index.css << 'EOL'
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
EOL

# Khởi động dự án để kiểm tra
echo "Cài đặt hoàn tất! Đang khởi động dự án..."
npm run dev

echo "Dự án đã được tạo và chạy tại http://localhost:5173"