TanStack Router: Người bạn đồng hành mới của Developer React

Hôm nay, hãy ngồi xuống, nhâm nhi một tách cà phê (hoặc trà, nếu bạn là team trà), và cùng mình kể một câu chuyện về TanStack Router – một thư viện định tuyến đang làm mưa làm gió trong cộng đồng React. Nếu bạn là một developer đang tìm kiếm một công cụ định tuyến mạnh mẽ, an toàn kiểu (type-safe), và tích hợp siêu mượt với hệ sinh thái hiện đại, thì đây chính là bài viết dành cho bạn.

Một ngày nọ, mình chán React Router...

Thật ra, mình không ghét React Router. Nó giống như một người bạn cũ, đáng tin, đã cùng mình vượt qua bao dự án. Nhưng rồi, có những ngày mình ngồi debug, nhìn vào đống code xử lý useParams mà không chắc tham số có đúng kiểu hay không, hay phải viết thêm cả tá logic để quản lý search params (những ?page=1&sort=asc trong URL). Lúc đó, mình tự hỏi: “Có cách nào hay hơn không nhỉ?”

Rồi một ngày đẹp trời, mình lướt blog và thấy ai đó nhắc đến TanStack Router. “Ồ, cái gì đây? Lại một thư viện mới à?” – mình nghĩ. Nhưng khi lướt qua tài liệu, mình nhận ra đây không chỉ là một thư viện định tuyến bình thường. Nó giống như một người bạn đồng hành thông minh, hiểu bạn, và giúp bạn viết code sạch hơn, nhanh hơn, an toàn hơn.

TanStack Router là ai?

Nếu bạn đã từng dùng TanStack Query (hay còn gọi là React Query), bạn sẽ biết đội ngũ TanStack không đùa khi nói đến việc xây dựng công cụ chất lượng. TanStack Router là thư viện định tuyến được thiết kế dành riêng cho các ứng dụng React (và cả Solid nữa, nhưng hôm nay mình chỉ nói về React thôi nhé). Nó không chỉ giúp bạn điều hướng giữa các trang, mà còn mang đến cả một hệ sinh thái để làm cho ứng dụng của bạn mượt mà như lụa.

Hãy tưởng tượng TanStack Router như một người hướng dẫn viên du lịch siêu pro:

• Nó biết chính xác bạn muốn đi đâu (type-safe routes).
• Nó chuẩn bị sẵn mọi thứ trước khi bạn đến (data preloading với TanStack Query).
• Nó giúp bạn sắp xếp hành lý gọn gàng (file-based routing).
• Và quan trọng nhất, nó không để bạn lạc đường (quản lý search params siêu thông minh).

Tại sao bạn nên thử TanStack Router?

Hãy để mình kể bạn nghe vài lý do khiến mình “phải lòng” TanStack Router:

1. Type-Safe đến từng milimet

Nếu bạn là fan của TypeScript (như mình), bạn sẽ thích cách TanStack Router biến định tuyến thành một trải nghiệm an toàn kiểu. Hãy quên chuyện nhập sai tên param hay nhầm kiểu dữ liệu. Với TanStack Router, IDE của bạn sẽ cảnh báo ngay nếu bạn làm sai. Ví dụ:

const params = useParams({ from: '/issues/$issueId' });

Câu lệnh trên đảm bảo issueId tồn tại và đúng kiểu. Nếu bạn cố truy cập issueId ở một route không có nó, TypeScript sẽ la lên ngay lập tức. Thật tuyệt, đúng không?

2. Search Params như một trạng thái toàn cục

Bạn đã bao giờ vật lộn với URLSearchParams để lấy giá trị từ URL chưa? TanStack Router biến chuyện đó thành dĩ vãng. Nó coi search params như một trạng thái toàn cục, và bạn có thể thao tác với chúng như với state trong React. Thêm nữa, nó còn tích hợp với các thư viện như Zod để xác thực dữ liệu. Ví dụ:

const search = useSearch({
  from: '/posts',
  validate: z.object({ page: z.number(), sort: z.enum(['asc', 'desc']) })
});

Giờ thì search.page và search.sort không chỉ dễ dùng mà còn đảm bảo đúng kiểu và giá trị. Không còn lo nhập nhằng nữa!

3. Tích hợp siêu mượt với TanStack Query

Nếu bạn đã dùng TanStack Query để quản lý dữ liệu, thì TanStack Router là một cặp bài trùng. Nó cho phép bạn preload dữ liệu ngay trong router, giúp tránh hiện tượng “request waterfall” (khi các request phải chờ nhau). Ví dụ, bạn có thể định nghĩa một route như sau:

export const Route = createFileRoute('/posts/$postId')({
  component: Post,
  loader: async ({ params }) => {
    return queryClient.fetchQuery({
      queryKey: ['post', params.postId],
      queryFn: () => fetchPost(params.postId),
    });
  },
});

Dữ liệu sẽ được tải trước khi component render, giúp ứng dụng nhanh hơn và người dùng không phải chờ đợi.

4. File-based Routing – Tổ chức code đẹp như mơ

Nếu bạn đã từng dùng Next.js và thích cách nó tổ chức route dựa trên thư mục, thì TanStack Router cũng có thứ tương tự. Chỉ cần tạo một thư mục routes và đặt tên file theo cấu trúc URL:

src/
├── routes/
│   ├── index.tsx         // Route "/"
│   ├── posts/
│   │   ├── $postId.tsx  // Route "/posts/:postId"
│   │   ├── index.tsx    // Route "/posts"

Router sẽ tự động tạo route tree dựa trên cấu trúc này. Thêm nữa, nó hỗ trợ lazy loading tự động, giúp ứng dụng của bạn nhẹ nhàng hơn bao giờ hết.

5. Hiệu năng đỉnh cao

TanStack Router không chỉ thông minh mà còn nhanh. Nó tự động phân chia mã (code-splitting) cho từng route, preload dữ liệu khi người dùng hover vào link, và tích hợp caching ngay tại router. Kết quả? Một ứng dụng mượt mà, phản hồi nhanh như chớp.

Nhưng mà... nó có khó dùng không?

Mình sẽ không nói dối: TanStack Router có thể hơi “khó tính” với người mới. Nếu bạn quen với React Router, việc chuyển sang TanStack Router sẽ cần một chút thời gian để làm quen với API và tư duy type-safe. Nhưng bù lại, tài liệu của họ rất chi tiết, và cộng đồng trên Discord hay X luôn sẵn sàng giúp đỡ.

Còn nếu bạn là người thích khám phá và không ngại học cái mới, thì TanStack Router sẽ là một cuộc phiêu lưu đáng giá. Hãy thử tưởng tượng: code sạch hơn, ít bug hơn, và đồng nghiệp của bạn sẽ trầm trồ khi thấy bạn xử lý search params như một ninja!

Làm sao để bắt đầu?

Muốn thử ngay? Đây là cách nhanh nhất để bắt đầu:

1. Cài đặt:

   npm i @tanstack/react-router

2. Tạo một router đơn giản:

   // router.tsx
   import { createRouter, createRoute } from '@tanstack/react-router';
   
   const rootRoute = createRoute({
     path: '/',
     component: () => 
   Chào mừng bạn đến với TanStack Router!
   ,
   });
   
   const postRoute = createRoute({
     path: '/post/$postId',
     component: () => {
       const { postId } = useParams();
       return 
   Bài viết: {postId}
   ;
     },
   });
   
   const routeTree = rootRoute.addChildren([postRoute]);
   const router = createRouter({ routeTree });
   
   export default router;

3. Tích hợp vào ứng dụng:

   // main.tsx
   import { createRoot } from 'react-dom/client';
   import { RouterProvider } from '@tanstack/react-router';
   import router from './router';
   
   const root = createRoot(document.getElementById('root')!);
   root.render();

Chỉ vài bước là bạn đã có một ứng dụng React với định tuyến type-safe rồi!

Kết luận: Có nên nhảy vào TanStack Router?

Nếu bạn là một developer đang tìm kiếm một thư viện định tuyến hiện đại, mạnh mẽ, và sẵn sàng cho tương lai, thì TanStack Router là một lựa chọn không thể bỏ qua. Nó không chỉ giúp bạn viết code an toàn hơn, mà còn mang lại hiệu năng tuyệt vời và tích hợp mượt mà với các công cụ như TanStack Query hay Vite.

Hãy thử dành một buổi chiều, setup một dự án nho nhỏ, và cảm nhận sự khác biệt. Ai biết được? Có thể TanStack Router sẽ trở thành người bạn đồng hành mới của bạn trong hành trình phát triển web!

Bạn đã thử TanStack Router chưa? Hoặc bạn có câu hỏi gì về cách dùng nó? Comment bên dưới hoặc nhắn mình trên X nhé – mình luôn sẵn sàng chia sẻ thêm kinh nghiệm!