Передача состояния при навигации

TanStack Router предоставляет гибкий способ управления маршрутизацией в приложениях на JavaScript, особенно при необходимости передавать состояние между маршрутами. В этой библиотеке состояние при навигации можно передавать через query parameters, state объект и dynamic params, что позволяет хранить данные без использования глобальных хранилищ или контекста.

Использование объекта state при переходе

Для передачи данных между маршрутами можно использовать опцию state в методах навигации, таких как navigate:

import { useRouter } from '@tanstack/router';

const router = useRouter();

router.navigate({
  to: '/profile',
  search: {},
  state: { fromDashboard: true, userId: 42 },
});
  • to – целевой маршрут.
  • search – объект для query-параметров (опционально).
  • state – объект состояния, который будет доступен на целевом маршруте.

На маршруте /profile доступ к переданному состоянию осуществляется через useLocation:

import { useLocation } from '@tanstack/router';

const location = useLocation();
console.log(location.state); // { fromDashboard: true, userId: 42 }

Особенности использования state:

  • Состояние хранится только в памяти и не отражается в URL.
  • При обновлении страницы объект state теряется, поэтому для данных, которые должны сохраняться между перезагрузками, лучше использовать query-параметры или глобальное хранилище.

Передача данных через query-параметры

Query-параметры позволяют передавать небольшие данные, которые должны оставаться видимыми в URL. TanStack Router обеспечивает их типизацию и автоматическое извлечение.

Пример передачи query-параметров при навигации:

router.navigate({
  to: '/search',
  search: { q: 'TanStack Router', page: 2 },
});

На целевом маршруте параметры доступны через useSearch:

import { useSearch } from '@tanstack/router';

const searchParams = useSearch();
console.log(searchParams.q); // 'TanStack Router'
console.log(searchParams.page); // 2

Преимущества использования query-параметров:

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

Dynamic Params и их сочетание с state

Dynamic params – это сегменты пути, которые задаются двоеточием в определении маршрута:

import { createRouteConfig } from '@tanstack/router';

const profileRoute = createRouteConfig({
  path: '/profile/:userId',
});

Переход к маршруту с динамическим параметром:

router.navigate({
  to: '/profile/42',
  state: { fromDashboard: true },
});

На целевом маршруте доступ к userId обеспечивается через useParams, а к state через useLocation:

import { useParams, useLocation } from '@tanstack/router';

const params = useParams();
const location = useLocation();

console.log(params.userId); // '42'
console.log(location.state.fromDashboard); // true

Комбинация dynamic params и state позволяет передавать идентификаторы ресурсов в URL и дополнительную мета-информацию в памяти приложения, что особенно удобно при построении SPA с детальными переходами.

Сохранение состояния при программной навигации и переходе назад

TanStack Router автоматически сохраняет историю переходов и позволяет корректно восстанавливать состояние при возврате на предыдущий маршрут. Если state был передан при навигации, оно останется доступным через объект location.state, пока пользователь не закроет вкладку или не обновит страницу.

Пример проверки при возврате на предыдущую страницу:

import { useLocation } from '@tanstack/router';
import { useEffect } from 'react';

const Dashboard = () => {
  const location = useLocation();

  useEffect(() => {
    if (location.state?.fromProfile) {
      console.log('Вернулись с профиля');
    }
  }, [location]);

  return <div>Главная панель</div>;
};

Рекомендации по передаче состояния

  1. Для временных данных, которые не должны сохраняться в URL: используйте state.
  2. Для данных, нужных в URL или для совместного использования ссылок: применяйте query-параметры.
  3. Для идентификаторов ресурсов: используйте dynamic params, комбинируя их при необходимости с state для хранения мета-данных.
  4. Не хранить большие объёмы данных в state — это может замедлить работу браузера и усложнить отладку.

Практическая структура маршрутов с передачей состояния

const router = createRouter({
  routes: [
    {
      path: '/',
      component: HomePage,
    },
    {
      path: '/profile/:userId',
      component: ProfilePage,
    },
    {
      path: '/search',
      component: SearchPage,
    },
  ],
});

Навигация с состоянием и query-параметрами:

router.navigate({
  to: '/search',
  search: { q: 'router tutorial' },
  state: { source: 'homepage' },
});

На странице SearchPage одновременно доступны:

const search = useSearch(); // { q: 'router tutorial' }
const state = useLocation().state; // { source: 'homepage' }

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

Оглавление