Плагины и расширения роутера

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

Механизм плагинов

Плагины в TanStack Router реализуются через middleware-подобные функции, которые обрабатывают события роутера на разных этапах жизненного цикла маршрута: навигация, загрузка данных, рендеринг компонентов. Плагины получают доступ к объекту router, контексту текущего маршрута и состоянию навигации.

Основные точки интеграции плагина:

  • beforeNavigate — вызывается перед сменой маршрута. Позволяет отменить навигацию или перенаправить на другой маршрут.
  • afterNavigate — вызывается после успешной смены маршрута, полезно для аналитики и логирования.
  • onError — обработка ошибок маршрутизации, включая ошибки загрузки данных.
  • onLoad — используется для асинхронной загрузки данных или выполнения побочных эффектов при активации маршрута.

Пример структуры плагина:

const loggingPlugin = {
  beforeNavigate: ({ to, cancel }) => {
    console.log('Переход на маршрут:', to.path);
    if (to.path === '/restricted') cancel();
  },
  afterNavigate: ({ to }) => {
    console.log('Успешно перешли на:', to.path);
  },
  onError: ({ error }) => {
    console.error('Ошибка навигации:', error);
  }
};

router.use(loggingPlugin);

Расширение маршрутов через функции

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

Пример расширения маршрута:

const authRoute = (route) => ({
  ...route,
  beforeLoad: async ({ context, cancel }) => {
    const user = await context.getUser();
    if (!user.isAuthenticated) cancel('/login');
  }
});

const dashboardRoute = authRoute({
  path: '/dashboard',
  component: Dashboard
});

В этом примере расширение authRoute инкапсулирует логику проверки авторизации, позволяя использовать её для любого маршрута.

Использование плагинов для состояния маршрута

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

  • Сохранения выбранных фильтров и параметров запроса.
  • Реализации кэширования данных между маршрутами.
  • Поддержки многошаговых форм с навигацией между шагами.

Пример глобального состояния:

import { createRouter, RouterState } from '@tanstack/router';

const routerStatePlugin = {
  afterNavigate: ({ to, state }) => {
    state.set('lastVisited', to.path);
  }
};

const state = new RouterState();
const router = createRouter({ routes, state });
router.use(routerStatePlugin);

Интеграция с асинхронными данными

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

  • Выполнять предварительный запрос данных.
  • Отменять навигацию при ошибках.
  • Показывать индикаторы загрузки до завершения асинхронных операций.

Пример плагина для загрузки данных:

const fetchDataPlugin = {
  onLoad: async ({ route, context }) => {
    try {
      const data = await fetch(`/api${route.path}`);
      context.setData(route.path, data);
    } catch (err) {
      console.error('Ошибка загрузки данных:', err);
    }
  }
};

router.use(fetchDataPlugin);

Создание пользовательских стратегий маршрутизации

Плагины позволяют внедрять кастомные стратегии маршрутизации, например:

  • Lazy-loading компонентов только при необходимости.
  • Смена маршрута по определённым событиям приложения (например, после успешного API-запроса).
  • Имитация защищённых маршрутов с ролью пользователя или фич-флагами.

Пример стратегии ленивой загрузки:

const lazyLoadPlugin = {
  beforeNavigate: async ({ to }) => {
    if (to.component?.load) {
      to.component = await to.component.load();
    }
  }
};
router.use(lazyLoadPlugin);

Архитектурные преимущества

Использование плагинов и расширений в TanStack Router:

  • Модульность — новые функции добавляются без изменения ядра.
  • Повторное использование — расширения маршрутов и плагины могут применяться к нескольким маршрутам.
  • Контроль навигации — полный доступ к процессу перехода между маршрутами.
  • Асинхронность — встроенная поддержка промисов позволяет интегрировать API-запросы и динамическую загрузку компонентов.

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

Оглавление