13. Router: навигация

Компонент Link

<Link> — основной способ навигации в TanStack Router. Полностью типизирован:

import { Link } from '@tanstack/react-router'

// Простая навигация
<Link to="/users">Пользователи</Link>

// С параметрами (TypeScript проверит, что userId передан!)
<Link to="/users/$userId" params={{ userId: '123' }}>
  Профиль
</Link>

// С поисковыми параметрами
<Link to="/users" search={{ page: 1, filter: 'active' }}>
  Активные пользователи
</Link>

// Активный стиль
<Link
  to="/users"
  activeProps={{ className: 'text-red-500 font-bold' }}
  inactiveProps={{ className: 'text-gray-400' }}
>
  Пользователи
</Link>

activeOptions

Контроль того, когда ссылка считается активной:

// Активна только при точном совпадении (default: false — активна и на вложенных)
<Link to="/users" activeOptions={{ exact: true }}>...</Link>

// Учитывать search params при определении активности
<Link to="/users" search={{ filter: 'active' }} activeOptions={{ includeSearch: true }}>
  ...
</Link>

useNavigate

Программная навигация:

import { useNavigate } from '@tanstack/react-router'

function Component() {
  const navigate = useNavigate()

  const handleSubmit = async () => {
    await createUser(data)
    // Навигация после действия
    navigate({ to: '/users/$userId', params: { userId: newUser.id } })
  }

  // Навигация назад
  const goBack = () => navigate({ to: -1 })

  // Обновить search params
  const updatePage = (page: number) => {
    navigate({
      to: '.',
      search: (prev) => ({ ...prev, page }),
    })
  }
}

useMatch и useParams

import { useParams, useMatch } from '@tanstack/react-router'

// Получить параметры текущего маршрута
const { userId } = useParams({ from: '/users/$userId' })

// Проверить активен ли маршрут
const match = useMatch({ from: '/users/$userId', shouldThrow: false })
const isActive = match !== undefined

useRouter

Доступ к объекту роутера:

const router = useRouter()

// Навигация
router.navigate({ to: '/users' })

// История
router.history.back()
router.history.forward()

// Текущее состояние
router.state.location.pathname

Prefetch при hover

defaultPreload: 'intent' в конфигурации роутера автоматически загружает данные лоадера при hover на <Link>. Для ручного управления:

<Link
  to="/users/$userId"
  params={{ userId }}
  preload="intent"  // или 'viewport' для загрузки при попадании в viewport
>
  ...
</Link>