Параметры маршрутов

В React Router параметры маршрутов позволяют динамически передавать значения через URL и использовать их для рендеринга соответствующих компонентов. Параметры задаются с помощью двоеточия (:) в пути маршрута и могут быть извлечены с помощью хуков или компонентов библиотеки.

Объявление параметров

Для объявления параметра в маршруте используется синтаксис :имяПараметра. Например:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

В этом примере :userId — это параметр маршрута, который будет содержать значение из URL, например /user/42.

Извлечение параметров с помощью хука useParams

Для доступа к значениям параметров используется хук useParams, который возвращает объект с ключами, соответствующими именам параметров:

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

function UserProfile() {
  const { userId } = useParams();
  
  return <div>Профиль пользователя с ID: {userId}</div>;
}

Если URL равен /user/42, то userId будет равен "42".

Параметры в нескольких сегментах

Маршрут может содержать несколько параметров:

<Route path="/user/:userId/post/:postId" element={<Post />} />

В компоненте Post можно получить оба значения:

const { userId, postId } = useParams();

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

Необязательные параметры

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

<Route path="/products/:categoryId?" element={<ProductList />} />

Если URL /products не содержит параметра, categoryId будет undefined. Это удобно для построения универсальных маршрутов, обрабатывающих несколько вариантов.

Использование параметров для загрузки данных

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

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <div>Загрузка...</div>;
  return <div>Имя пользователя: {user.name}</div>;
}

Параметры и вложенные маршруты

Вложенные маршруты могут использовать параметры верхнего уровня. Например:

<Route path="/user/:userId" element={<User />}>
  <Route path="posts/:postId" element={<UserPost />} />
</Route>

В UserPost можно получить оба параметра:

const { userId, postId } = useParams();

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

Ограничение формата параметров

Можно задавать регулярные выражения для параметров, чтобы ограничить допустимые значения. В React Router 6 используется простой синтаксис через компонент <Route>:

<Route path="/order/:orderId(\d+)" element={<OrderDetails />} />

В этом случае orderId будет соответствовать только числовым значениям. URL /order/abc не будет совпадать с маршрутом.

Передача параметров через ссылку

Параметры можно указывать в ссылках с помощью компонента Link или хука useNavigate:

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

<Link to={`/user/${user.id}`}>Перейти к профилю</Link>

Используя useNavigate для программной навигации:

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

const navigate = useNavigate();
navigate(`/user/${userId}`);

Динамическая генерация маршрутов

Для приложений с большим числом динамических страниц полезно создавать маршруты на основе данных:

const routes = users.map(user => (
  <Route key={user.id} path={`/user/${user.id}`} element={<UserProfile />} />
));

Это позволяет избегать дублирования кода и облегчает поддержку маршрутов.

Вывод

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

Оглавление