Модульная структура маршрутов

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

В TanStack Router маршруты описываются объектами с полями path, component, loader, action и дочерними маршрутами (children). Стандартная структура может быстро стать громоздкой, если все маршруты прописаны в одном файле. Модульный подход заключается в том, чтобы каждый логический блок приложения (например, страницы пользователя, админ-панель, публичные страницы) оформлять отдельными файлами с собственными маршрутными конфигурациями.

Создание отдельных модулей маршрутов

Каждый модуль содержит объект маршрута и при необходимости его дочерние маршруты. Например, для страниц пользователей можно создать файл userRoutes.js:

import UserProfile from './components/UserProfile';
import UserSettings from './components/UserSettings';

export const userRoutes = {
  path: '/user',
  children: [
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'settings',
      component: UserSettings
    }
  ]
};

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

Импорт и объединение маршрутов

После создания отдельных модулей маршрутов их необходимо объединить в основной маршрутный объект приложения. Для этого можно использовать массивы маршрутов или функцию mergeRoutes (если требуется динамическое объединение):

import { createRouter } from '@tanstack/router';
import { userRoutes } from './userRoutes';
import { adminRoutes } from './adminRoutes';
import { publicRoutes } from './publicRoutes';

const routes = [publicRoutes, userRoutes, adminRoutes];

export const router = createRouter({ routes });

Основной объект маршрутов остаётся компактным, а управление структурой маршрутов происходит через отдельные модули.

Вложенные маршруты и lazy loading

Модульная структура особенно удобна при использовании вложенных маршрутов. Например, админ-модуль может иметь собственные подмаршруты:

export const adminRoutes = {
  path: '/admin',
  children: [
    {
      path: 'dashboard',
      component: () => import('./components/AdminDashboard'),
    },
    {
      path: 'users',
      component: () => import('./components/AdminUsers'),
    }
  ]
};

Использование () => import() позволяет подключать компоненты динамически, что снижает первоначальный вес бандла и ускоряет загрузку страниц. Каждая часть маршрутов загружается только при необходимости, сохраняя преимущества модульной архитектуры.

Типизация маршрутов в TypeScript

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

export interface UserRouteParams {
  userId: string;
}

export const userRoutes = {
  path: '/user/:userId',
  component: UserProfile,
  loader: async ({ params }: { params: UserRouteParams }) => {
    const response = await fetch(`/api/users/${params.userId}`);
    return response.json();
  },
};

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

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

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

const pluginRoutes = loadPluginRoutes(); // массив маршрутов из плагина
router.addRoutes(pluginRoutes);

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

Организация файловой структуры

Для удобства работы рекомендуется использовать следующую иерархию:

src/
  routes/
    index.js           // основной роутер
    publicRoutes.js
    userRoutes.js
    adminRoutes.js
  components/
    UserProfile.js
    UserSettings.js
    AdminDashboard.js

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

Особенности работы с редиректами и приватными маршрутами

Модульная структура упрощает настройку редиректов и ограничений доступа. Например, приватные маршруты могут быть оформлены как отдельный модуль, где все дочерние маршруты проверяют авторизацию:

export const privateRoutes = {
  path: '/app',
  children: [
    {
      path: 'dashboard',
      component: Dashboard,
      beforeEnter: async ({ context }) => {
        if (!context.user) throw redirect('/login');
      }
    }
  ]
};

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

Оглавление