Дефолтные значения параметров

В React Router работа с маршрутами часто включает использование параметров, передаваемых в URL. Иногда возникает необходимость предусмотреть сценарий, когда параметр отсутствует, и тогда на помощь приходят дефолтные значения параметров.

Определение параметров маршрута

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

<Route path="/user/:id" element={<UserPage />} />

В этом примере :id — параметр маршрута. При переходе на /user/42 компонент UserPage получает доступ к значению id через хук useParams:

import { useParams } from "react-router-dom";

function UserPage() {
  const { id } = useParams();
  return <div>ID пользователя: {id}</div>;
}

Если пользователь перейдёт на /user без указания id, значение параметра будет undefined. Для таких случаев полезно задавать дефолтное значение.

Использование дефолтных значений через деструктуризацию

Наиболее простой способ задать дефолтное значение — это деструктуризация объекта params с указанием значения по умолчанию:

function UserPage() {
  const { id = "неизвестен" } = useParams();
  return <div>ID пользователя: {id}</div>;
}

Теперь при переходе на /user вместо undefined будет отображаться "неизвестен". Этот подход удобен для небольших параметров, когда не требуется сложная логика обработки.

Дефолтные значения через <Route> и опциональные параметры

React Router позволяет создавать опциональные параметры с использованием знака вопроса ?:

<Route path="/user/:id?" element={<UserPage />} />

Параметр id теперь может быть либо задан, либо отсутствовать. В компоненте можно обработать оба случая:

function UserPage() {
  const { id } = useParams();
  const userId = id || "неизвестен";
  return <div>ID пользователя: {userId}</div>;
}

Здесь оператор || гарантирует использование дефолтного значения, если id не задан.

Дефолтные значения через <Navigate> и редиректы

Иногда имеет смысл перенаправлять пользователя на маршрут с дефолтным параметром, если параметр отсутствует:

import { Navigate } from "react-router-dom";

function UserPage() {
  const { id } = useParams();

  if (!id) {
    return <Navigate to="/user/1" replace />;
  }

  return <div>ID пользователя: {id}</div>;
}

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

Дефолтные значения при работе с query-параметрами

Для query-параметров используется хук useSearchParams. Дефолтные значения задаются аналогично:

import { useSearchParams } from "react-router-dom";

function ProductsPage() {
  const [searchParams] = useSearchParams();
  const page = searchParams.get("page") || "1";

  return <div>Страница продуктов: {page}</div>;
}

Если query-параметр page отсутствует, будет использоваться "1".

Комплексная обработка нескольких параметров

При большом количестве параметров рекомендуется объединять деструктуризацию и логическую проверку:

function Dashboard() {
  const { section, tab } = useParams();
  const currentSection = section || "overview";
  const currentTab = tab || "main";

  return (
    <div>
      <h1>Раздел: {currentSection}</h1>
      <h2>Вкладка: {currentTab}</h2>
    </div>
  );
}

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

Резюме практик

  • Деструктуризация с дефолтами — самый простой и читаемый способ.
  • Опциональные параметры в маршруте (?) — полезны, когда параметр может отсутствовать в URL.
  • Редирект с <Navigate> — подходит для строгого контроля значений.
  • Дефолтные значения для query-параметров — через useSearchParams и логические операторы.
  • Комплексная обработка — объединяет все методы для удобного управления несколькими параметрами.

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

Оглавление