Работа с Remix

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

npm install @tanstack/router

После установки создается экземпляр роутера, который будет использоваться для определения маршрутов:

import { createRouter, Route } from '@tanstack/router'

const router = createRouter({
  routeTree: rootRoute
})

Основной объект маршрута (Route) требует указания пути и компонента, который рендерится на этом пути.

Создание маршрутов

Маршруты в TanStack Router представляют собой иерархическую структуру. Для Remix удобно использовать вложенные маршруты, соответствующие структуре папок app/routes.

Пример базовой конфигурации маршрутов:

import { Route } from '@tanstack/router'
import HomePage from './pages/HomePage'
import AboutPage from './pages/AboutPage'
import UserPage from './pages/UserPage'

const rootRoute = new Route({
  path: '/',
  component: HomePage,
  children: [
    new Route({
      path: 'about',
      component: AboutPage,
    }),
    new Route({
      path: 'user/:userId',
      component: UserPage,
    })
  ]
})

Ключевые моменты:

• path поддерживает динамические сегменты (:userId), которые автоматически становятся параметрами.
• children создают вложенные маршруты, полностью совместимые с в Remix.

Работа с динамическими данными

Для маршрутов с параметрами (params) TanStack Router предоставляет API для извлечения данных и выполнения асинхронных операций:

const userRoute = new Route({
  path: 'user/:userId',
  component: UserPage,
  loader: async ({ params }) => {
    const response = await fetch(`/api/users/${params.userId}`)
    return response.json()
  }
})

Особенности:

• loader вызывается при навигации на маршрут и позволяет предварительно загружать данные.
• params автоматически соответствуют динамическим сегментам пути.

Навигация и ссылки

Для навигации используется хук useNavigate и компонент Link, интегрированные с роутером:

import { Link, useNavigate } from '@tanstack/router'

function Navigation() {
  const navigate = useNavigate()
  
  return (
    

      Главная
      О нас
       navigate('/user/42')}>Профиль пользователя
    
  )
}

Важно:

• useNavigate() позволяет программно изменять маршрут.
• Link автоматически предотвращает полную перезагрузку страницы, как в SPA.

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

В Remix и TanStack Router вложенные маршруты отображаются через :

import { Outlet } from '@tanstack/router'

function RootLayout() {
  return (
    

      
Навигация
      

        
      
    
  )
}

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

Работа с состоянием маршрутов

TanStack Router поддерживает route state, что позволяет хранить данные, специфичные для маршрута, и синхронизировать их с URL:

const [state, setState] = useRouteState(userRoute, { view: 'summary' })

// Изменение состояния
setState({ view: 'details' })

Применение:

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

Обработка ошибок и загрузки

TanStack Router предоставляет возможности для глобальной и локальной обработки ошибок через errorElement и loadingElement:

const userRoute = new Route({
  path: 'user/:userId',
  component: UserPage,
  loader: async ({ params }) => fetch(`/api/users/${params.userId}`).then(res => res.json()),
  errorElement: 
Произошла ошибка загрузки пользователя
,
  loadingElement: 
Загрузка данных...
})

Особенности:

• loadingElement отображается, пока выполняется loader.
• errorElement перехватывает ошибки асинхронного запроса и рендерится вместо основного компонента.

Интеграция с Remix Data Fetching

Для глубокого использования возможностей Remix, TanStack Router можно комбинировать с существующими loader и action:

• loader маршрута TanStack Router можно привязать к Remix loader.
• Асинхронные данные возвращаются в компоненты через useLoaderData.

Пример интеграции:

import { useLoaderData } from '@remix-run/react'

function UserPage() {
  const user = useLoaderData()
  
  return 
{user.name}
}

Оптимизация маршрутов и lazy loading

TanStack Router поддерживает ленивую загрузку компонентов для улучшения производительности:

const AboutPage = React.lazy(() => import('./pages/AboutPage'))

const aboutRoute = new Route({
  path: 'about',
  component: () => (
    Загрузка...