Сброс параметров поиска

В TanStack Router управление состоянием маршрута осуществляется через объекты routes, searchParams и route context. Сброс параметров поиска — частая задача, которая позволяет возвращать URL к исходному состоянию без сохранения предыдущих фильтров или параметров запроса.

Управление searchParams

Каждый маршрут в TanStack Router может использовать searchParams — объект, содержащий ключи и значения параметров URL. Например:

const router = createRouter({
  routes: [
    {
      path: '/products',
      component: ProductsPage,
    },
  ],
});

Если пользователь применяет фильтры или сортировку через параметры запроса (?category=books&sort=price), эти параметры добавляются в объект searchParams.

Получение и модификация параметров

Для доступа и изменения параметров используется хук useSearchParams:

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

function ProductsPage() {
  const [searchParams, setSearchParams] = useSearchParams();

  // чтение параметров
  const category = searchParams.get('category');
  const sort = searchParams.get('sort');

  // установка параметров
  const applyFilter = () => {
    setSearchParams({ category: 'books', sort: 'price' });
  };
}

Для сброса параметров достаточно вызвать setSearchParams с пустым объектом:

setSearchParams({});

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

Частичный сброс параметров

Иногда требуется сбросить только определённые параметры, сохранив остальные. В этом случае можно использовать функцию обновления на основе предыдущего состояния:

setSearchParams(prev => {
  const newParams = { ...prev };
  delete newParams.sort; // удаляем только параметр сортировки
  return newParams;
});

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

Сброс через маршруты и actions

TanStack Router поддерживает механизм actions, который можно использовать для сброса searchParams в контексте маршрута:

const router = createRouter({
  routes: [
    {
      path: '/products',
      component: ProductsPage,
      action: async ({ searchParams, router }) => {
        if (searchParams.get('reset') === 'true') {
          router.setSearchParams({});
        }
      },
    },
  ],
});

Это позволяет программно инициировать очистку параметров поиска при выполнении определённых действий, например, нажатии кнопки “Сбросить фильтры” или при переходе по специальной ссылке.

Сброс с сохранением состояния компонентов

Иногда необходимо сбросить параметры поиска без перезагрузки компонентов. В TanStack Router это можно сделать через replaceSearchParams, чтобы обновить URL без повторного рендеринга страницы:

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

function ResetButton() {
  const router = useRouter();

  const resetFilters = () => {
    router.replaceSearchParams({});
  };

  return <button onCl ick={resetFilters}>Сбросить фильтры</button>;
}

replaceSearchParams сохраняет текущий компонент в DOM и обновляет только состояние URL, что особенно полезно для сохранения внутренних состояний формы или таблицы.

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

В маршрутах с вложенными уровнями важно учитывать, что searchParams распространяются на весь контекст маршрута. Чтобы сбросить параметры только для определённого уровня:

const parentRouter = useRouter({ from: 'parent' });
parentRouter.setSearchParams({});

Это очищает параметры на конкретном уровне вложенности, не влияя на другие маршруты.

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

  • setSearchParams({}) полностью очищает все параметры поиска.
  • Для выборочного сброса используется копирование объекта prev с удалением нужных ключей.
  • replaceSearchParams({}) обновляет URL без перезагрузки компонента.
  • Вложенные маршруты требуют управления searchParams через соответствующий уровень контекста.
  • Actions маршрутов позволяют программно инициировать сброс параметров при переходах или событиях.

Система управления параметрами поиска в TanStack Router построена так, чтобы обеспечивать как полное очищение URL, так и выборочное управление состоянием фильтров, сохраняя при этом согласованность маршрутов и компонентов.

Оглавление