Организация крупных приложений

В крупных приложениях управление маршрутизацией требует продуманной архитектуры, чтобы поддерживать масштабируемость и читаемость кода. TanStack Router предлагает концепцию иерархических маршрутов, которая позволяет строить сложные структуры навигации без дублирования логики и обеспечивая высокую предсказуемость поведения.

Ключевыми аспектами являются:

  • Иерархия маршрутов: маршруты могут быть вложенными, что позволяет группировать функциональность по модулям. Например, все маршруты, связанные с профилем пользователя, могут находиться под /profile, а маршруты администрирования — под /admin.
  • Маршруты как объекты: каждый маршрут описывается объектом, содержащим путь, компонент для рендеринга и дочерние маршруты. Это повышает читаемость и позволяет использовать маршруты в различных частях приложения.
import { createRouter, Route } from '@tanstack/router';
import ProfilePage from './ProfilePage';
import AdminDashboard from './AdminDashboard';

const router = createRouter({
  routes: [
    {
      path: '/profile',
      component: ProfilePage,
      children: [
        { path: 'settings', component: ProfileSettings },
        { path: 'history', component: ProfileHistory },
      ],
    },
    {
      path: '/admin',
      component: AdminDashboard,
      children: [
        { path: 'users', component: AdminUsers },
        { path: 'reports', component: AdminReports },
      ],
    },
  ],
});

Динамические сегменты и параметры маршрутов

TanStack Router позволяет использовать динамические сегменты в путях, что особенно полезно для ресурсов с уникальными идентификаторами.

  • Параметры маршрутов обозначаются через двоеточие :id.
  • Параметры автоматически передаются компоненту, что упрощает доступ к данным.
{
  path: '/profile/:userId',
  component: UserProfile,
}

Для извлечения параметров используется хук useParams:

import { useParams } from '@tanstack/router';

function UserProfile() {
  const { userId } = useParams();
  return <div>Профиль пользователя {userId}</div>;
}

Ленивая загрузка и оптимизация

Крупные приложения неизбежно сталкиваются с проблемой большого объема кода. TanStack Router поддерживает ленивую загрузку компонентов, что позволяет уменьшить начальный размер бандла.

import { lazy } from 'react';

const AdminUsers = lazy(() => import('./AdminUsers'));

{
  path: '/admin/users',
  component: AdminUsers,
}

Использование ленивой загрузки в комбинации с вложенными маршрутами обеспечивает эффективную разбивку кода по модулям и ускоряет рендеринг.

Состояние и синхронизация с URL

TanStack Router предоставляет возможности управления состоянием маршрутов через route loaders и actions.

  • Loaders выполняют асинхронную загрузку данных перед рендерингом компонента.
  • Actions позволяют изменять состояние маршрута или выполнять операции, такие как отправка форм, без необходимости использования стороннего состояния.
const userLoader = async ({ params }) => {
  const response = await fetch(`/api/users/${params.userId}`);
  return response.json();
};

{
  path: '/profile/:userId',
  component: UserProfile,
  loader: userLoader,
}

Группировка маршрутов и модули

В крупных приложениях полезно группировать маршруты по функциональным модулям. Это снижает когнитивную нагрузку при поддержке кода. Структура может выглядеть так:

src/
 └─ routes/
     ├─ profile/
     │   ├─ index.js
     │   ├─ settings.js
     │   └─ history.js
     └─ admin/
         ├─ index.js
         ├─ users.js
         └─ reports.js

Каждый модуль экспортирует маршруты в виде массива, который затем объединяется в основной роутер. Такой подход облегчает масштабирование и повторное использование маршрутов.

Навигация и программный переход

Для управления переходами между страницами TanStack Router предоставляет хук useNavigate:

import { useNavigate } from '@tanstack/router';

function ProfileButton() {
  const navigate = useNavigate();
  return <button onCl ick={() => navigate('/profile/settings')}>Настройки</button>;
}

Поддерживается переход с сохранением состояния, что позволяет безопасно сохранять данные при навигации между сложными формами или динамическими страницами.

Защита маршрутов и авторизация

В больших приложениях часто требуется ограничивать доступ к отдельным маршрутам. Для этого используется проверка в loader или guard на уровне маршрута:

const adminGuard = ({ session }) => {
  if (!session.isAdmin) {
    return '/login';
  }
};

{
  path: '/admin',
  component: AdminDashboard,
  guard: adminGuard,
}

Это обеспечивает централизованное управление доступом и предотвращает дублирование логики в компонентах.

Поддержка параллельных маршрутов

TanStack Router поддерживает параллельные маршруты, позволяя одновременно рендерить несколько областей интерфейса, которые не зависят друг от друга. Это полезно для приложений с боковыми панелями, модальными окнами или сложной многосекционной структурой.

{
  path: '/dashboard',
  children: [
    { path: '/', component: DashboardMain },
    { path: 'sidebar', component: DashboardSidebar, parallel: true },
  ],
}

Такой подход повышает гибкость архитектуры и снижает количество повторяющегося кода.

Интеграция с внешними библиотеками состояния

TanStack Router легко интегрируется с React Query или другими менеджерами состояния, позволяя синхронизировать асинхронные данные с маршрутом. Например, loader можно использовать для предварительной загрузки данных через React Query, что обеспечивает кэширование и автоматическое обновление интерфейса при изменении данных.

Эта методика организации маршрутов позволяет строить масштабируемые, модульные и легко поддерживаемые приложения, минимизируя дублирование кода и повышая предсказуемость поведения при навигации и работе с состоянием.

Оглавление