TanStack Router для React: Як використовувати потужний маршрутизатор у сучасних додатках

У світі розробки веб-додатків на React вибір маршрутизатора є важливою частиною архітектури програми. TanStack Router — це сучасний маршрутизатор, який пропонує розробникам гнучкість і ефективність для створення складних і продуктивних додатків. У цій статті ми розглянемо, що таке TanStack Router, як він працює, і чому варто розглянути його як альтернативу популярному React Router.

Що таке TanStack Router?

TanStack Router — це бібліотека для управління маршрутизацією у додатках, яка є частиною екосистеми TanStack (відомої за такими бібліотеками, як TanStack Table та TanStack Query). Головна особливість TanStack Router — це підтримка декларативної, типізованої та оптимізованої маршрутизації, що відповідає сучасним вимогам розробки.

Бібліотека створена з акцентом на продуктивність, масштабованість і простоту інтеграції.

Основні переваги TanStack Router

1. Статична типізація
   Завдяки інтеграції з TypeScript маршрути у TanStack Router мають чітку типізацію, що знижує кількість помилок під час розробки.
2. Простота декларативного підходу
   Ви описуєте структуру маршрутів у вигляді дерева, що полегшує читання та підтримку коду.
3. Потужна підтримка асинхронності
   TanStack Router дозволяє легко працювати з асинхронними даними, такими як завантаження або підготовка даних перед рендерингом компонента.
4. Інтеграція з React
   Завдяки React-сумісності бібліотека чудово працює з React Hooks та іншими особливостями React.
5. Масштабованість
   TanStack Router підходить для великих додатків із багаторівневою ієрархією маршрутів.

Як встановити TanStack Router?

Для початку роботи з TanStack Router потрібно встановити бібліотеку:

npm install @tanstack/react-router

Якщо ви використовуєте TypeScript, бібліотека автоматично надає типи для роботи.

Приклад використання TanStack Router

Налаштування маршрутів

Перш за все, потрібно створити конфігурацію маршрутів.

import { createReactRouter, createRouteConfig, RouterProvider } from '@tanstack/react-router';
// Опис маршрутів
const routeConfig = createRouteConfig()
  .addChildren([
    {
      path: '/',
      element: <HomePage />,
    },
    {
      path: '/about',
      element: <AboutPage />,
    },
    {
      path: '/users/:userId',
      element: <UserPage />,
      loader: async ({ params }) => {
      // Завантаження даних для сторінки користувача
      return fetch(`/api/users/${params.userId}`).then((res) => res.json());
      },
    },
 ]);
// Створення маршрутизатора
const router = createReactRouter({ routeConfig });

Використання маршрутизатора у додатку

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

Асинхронне завантаження даних у TanStack Router

TanStack Router має вбудовану підтримку завантаження даних для маршрутів. Це дозволяє динамічно отримувати дані перед рендерингом сторінки.

const userRoute = {
  path: '/users/:userId',
  loader: async ({ params }) => {
  const user = await fetch(`/api/users/${params.userId}`).then((res) => res.json());
return user;
},
element: <UserPage />,
};

У компоненті UserPage ви можете отримати завантажені дані:

import { useLoaderData } from '@tanstack/react-router';
function UserPage() {
  const user = useLoaderData();
  return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}

Порівняння з React Router

Чому варто обрати TanStack Router?

Якщо ви шукаєте бібліотеку, яка поєднує потужність, простоту та сучасні підходи до розробки, TanStack Router може стати чудовим вибором. Він забезпечує розширену функціональність і підходить для великих додатків, де важлива типізація, масштабованість і інтеграція з асинхронними процесами.

Висновок

TanStack Router — це сучасний інструмент для маршрутизації, який розробники React можуть використовувати для створення ефективних і добре структурованих додатків. Завдяки своїм особливостям, таким як декларативний підхід, інтеграція з TypeScript і потужна підтримка асинхронності, він стає однією з найкращих альтернатив для маршрутизації у React. Спробуйте TanStack Router у вашому наступному проєкті, щоб оцінити його переваги на практиці.