Опциональные параметры

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

Синтаксис опциональных параметров

Опциональный параметр в маршруте определяется с помощью вопросительного знака ? после имени параметра:

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

В этом примере параметр id является опциональным. Это означает, что маршрут будет соответствовать как URL /user/123, так и /user/.

Доступ к опциональным параметрам

Для получения значения опционального параметра используется хук useParams из React Router:

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

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

  return (
    <div>
      {id ? `Пользователь с ID: ${id}` : 'Список всех пользователей'}
    </div>
  );
}

Если параметр присутствует в URL, id получит его значение. Если параметр отсутствует, id будет undefined, что позволяет реализовать условный рендеринг компонентов.

Опциональные параметры и вложенные маршруты

Опциональные параметры удобно использовать вместе с вложенными маршрутами. Например:

<Route path="/products/:category?">
  <Route index element={<AllProducts />} />
  <Route path=":id" element={<ProductDetail />} />
</Route>

Здесь:

  • /products — отображает компонент AllProducts.
  • /products/electronics — также отображает AllProducts, но с фильтром категории.
  • /products/electronics/42 — отображает компонент ProductDetail для конкретного продукта.

Обработка нескольких опциональных параметров

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

<Route path="/search/:query?/:page?" element={<Search />} />
  • /search — отображает страницу поиска без запроса.
  • /search/laptops — поиск по ключевому слову laptops.
  • /search/laptops/2 — поиск по ключевому слову laptops на второй странице.

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

const { query, page } = useParams();

При этом query и page могут быть undefined, если они отсутствуют в URL.

Совместимость с навигацией

Опциональные параметры удобно использовать с навигацией через компонент Link или хук useNavigate:

import { Link } from 'react-router-dom';

<Link to="/search">Все результаты</Link>
<Link to="/search/laptops">Результаты по "laptops"</Link>
<Link to="/search/laptops/2">Страница 2 результатов</Link>

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

Опциональные параметры и query-параметры

Иногда вместо опциональных параметров лучше использовать query-параметры, особенно если параметров много или они не влияют на структуру маршрута. Пример с query-параметрами:

import { useLocation } from 'react-router-dom';

function Search() {
  const { search } = useLocation();
  const params = new URLSearchParams(search);
  const query = params.get('query') || '';
  const page = params.get('page') || '1';

  return <div>Поиск: {query}, страница: {page}</div>;
}

Разница в том, что опциональные параметры формируют часть пути, а query-параметры идут после ? и обычно используются для фильтров и пагинации.

Практические рекомендации

  • Использовать опциональные параметры, если параметр действительно влияет на структуру маршрута и логически является частью URL.
  • Для фильтров, поиска или состояний компонентов лучше использовать query-параметры.
  • Всегда проверять наличие опциональных параметров через условные конструкции, чтобы избежать ошибок при undefined.

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

Оглавление