Концепция файлового роутинга

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

Структура файлов и соответствие маршрутам

Каждый файл в директории маршрутов соответствует отдельному маршруту приложения. Например, файл:

/routes/dashboard.jsx

автоматически становится маршрутом /dashboard. Если внутри директории создаются вложенные папки:

/routes/dashboard/analytics.jsx

то путь к маршруту формируется как /dashboard/analytics. Такой подход упрощает поддержку проекта, так как визуальная структура папок отражает архитектуру URL.

Динамические сегменты

TanStack Router поддерживает динамические сегменты через квадратные скобки. Например:

/routes/users/[userId].jsx

создаёт маршрут /users/:userId, где userId доступен через объект параметров маршрута. Динамические сегменты можно комбинировать с вложенными маршрутами:

/routes/users/[userId]/settings.jsx

результирующий путь будет /users/:userId/settings.

Индексные маршруты

Файлы с названием index.jsx обрабатываются как индекс маршрута родительской папки. Пример:

/routes/dashboard/index.jsx

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

Layout компоненты

TanStack Router позволяет использовать layout-компоненты для групп маршрутов. Layout размещается в папке и оборачивает все дочерние маршруты. Пример структуры:

/routes/dashboard/_layout.jsx
/routes/dashboard/analytics.jsx
/routes/dashboard/reports.jsx

Здесь _layout.jsx будет общим контейнером для /dashboard/analytics и /dashboard/reports, обеспечивая единый каркас интерфейса, навигацию и другие общие элементы.

Использование вложенных маршрутов

Вложенные маршруты в файловой системе создаются автоматически. Важно, чтобы каждый вложенный маршрут экспортировал компонент с именованным экспортом Component или дефолтным экспортом. Пример:

// routes/dashboard/analytics.jsx
export default function Analytics() {
  return <div>Аналитика</div>;
}

TanStack Router на основе структуры файлов строит дерево маршрутов, которое затем можно использовать в приложении через <Router>.

Загрузка данных и обработка асинхронности

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

// routes/users/[userId].jsx
export async function loader({ params }) {
  const response = await fetch(`/api/users/${params.userId}`);
  return response.json();
}

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

Оптимизация и код-сплиттинг

Файловый роутинг естественным образом поддерживает разделение кода. Каждый компонент маршрута загружается динамически при посещении соответствующего URL. Это снижает первоначальный размер бандла и ускоряет загрузку приложения.

Согласованность и масштабируемость

Главное преимущество файлового роутинга — автоматическая синхронизация структуры URL с файловой системой. Это минимизирует ошибки при ручной настройке маршрутов, упрощает рефакторинг и масштабирование приложения.

Структура папок становится документацией по маршрутам, а вложенные layout-компоненты позволяют централизованно управлять общими элементами интерфейса.

Примеры организации

Простейшая структура проекта:

/routes
  index.jsx           -> '/'
  about.jsx           -> '/about'
  dashboard/
    index.jsx         -> '/dashboard'
    analytics.jsx     -> '/dashboard/analytics'
    reports.jsx       -> '/dashboard/reports'
    _layout.jsx       -> общий layout для dashboard
  users/
    [userId].jsx      -> '/users/:userId'
    [userId]/settings.jsx -> '/users/:userId/settings'

Каждый маршрут экспортирует компонент и при необходимости функции loader или action, что обеспечивает готовую архитектуру для больших SPA-приложений.

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

Оглавление