Извлечение параметров из URL
Давайте сначала поймем, зачем вообще нужны параметры маршрута. Представьте, что у вас есть интернет-магазин, и вы хотите открыть страницу конкретного товара. Вместо того чтобы создавать отдельный маршрут для каждого товара, можно использовать динамический маршрут, где часть URL будет параметром, например: /product/:id.
Что делает useParams?
Хук useParams, предоставляемый библиотекой react-router-dom, позволяет извлечь параметры из текущего маршрута. Основной его задачей является разбор URL и предоставление параметров в виде объекта.
Начнем с простого примера. Создадим приложение с маршрутом, который принимает параметр id (например, идентификатор продукта).
Маршруты приложения:
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProductPage from "./ProductPage";
function App() {
return (
<Router>
<Switch>
{/* Динамический маршрут с параметром id */}
<Route path="/product/:id" component={ProductPage} />
</Switch>
</Router>
);
}
export default App;Компонент ProductPage:
import React from "react";
import { useParams } from "react-router-dom";
interface RouteParams {
id: string; // Описание типа параметра маршрута
}
const ProductPage: React.FC = () => {
const { id } = useParams<RouteParams>(); // Извлечение параметра id из URL
return (
<div>
<h1>Страница продукта</h1>
<p>Идентификатор продукта: {id}</p>
</div>
);
};
export default ProductPage;
В этом примере useParams<RouteParams>() извлекает параметр id из URL. Если пользователь перейдет по адресу /product/123, компонент отобразит: Идентификатор продукта: 123.
Примеры выделения параметров и их использования
Хорошо, наш пример работает, но что делать со сложными параметрами? Рассмотрим несколько практических кейсов.
Работа с несколькими параметрами
Что, если маршрут должен содержать несколько параметров? Например, /product/:id/review/:reviewId.
Маршруты:
function App() {
return (
<Router>
<Switch>
{/* Маршрут с двумя параметрами */}
<Route path="/product/:id/review/:reviewId" component={ReviewPage} />
</Switch>
</Router>
);
}
Компонент для отображения:
import React from "react";
import { useParams } from "react-router-dom";
interface RouteParams {
id: string;
reviewId: string;
}
const ReviewPage: React.FC = () => {
const { id, reviewId } = useParams<RouteParams>(); // Извлекаем параметры
return (
<div>
<h1>Отзывы о продукте</h1>
<p>Идентификатор продукта: {id}</p>
<p>Идентификатор отзыва: {reviewId}</p>
</div>
);
};
export default ReviewPage;Теперь, если пользователь перейдет на /product/456/review/789, в компоненте будут доступны оба параметра: id = 456 и reviewId = 789.
Как использовать параметры для загрузки данных?
Обычно параметры URL используются для получения данных с сервера. Например, загрузка информации о продукте по id.
Компонент ProductPage:
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
interface RouteParams {
id: string;
}
interface Product {
id: string;
name: string;
description: string;
}
const ProductPage: React.FC = () => {
const { id } = useParams<RouteParams>();
const [product, setProduct] = useState<Product | null>(null);
useEffect(() => {
// Загружаем данные о продукте с сервера
fetch(`https://api.example.com/products/${id}`)
.then((res) => res.json())
.then((data) => setProduct(data))
.catch((error) => console.error("Ошибка загрузки продукта:", error));
}, [id]); // Перезагружаем данные при изменении id
if (!product) {
return <p>Загрузка...</p>;
}
return (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
</div>
);
};
export default ProductPage;Теперь, при загрузке страницы /product/123, компонент отправит запрос на сервер, чтобы получить данные о продукте с id = 123.
Обработка необязательных параметров
Иногда параметры могут быть необязательными. Например, маршрут /search/:query? (где параметр query может отсутствовать).
Пример:
function App() {
return (
<Router>
<Switch>
<Route path="/search/:query?" component={SearchPage} />
</Switch>
</Router>
);
}
const SearchPage: React.FC = () => {
const { query } = useParams<{ query?: string }>(); // query может быть undefined
return (
<div>
<h1>Поиск</h1>
{query ? <p>Результаты поиска для: {query}</p> : <p>Введите запрос для поиска.</p>}
</div>
);
};Типичные ошибки и как их избежать
Отсутствие типизации параметров: без интерфейсов TypeScript вы не сможете получить подсказки о том, какие параметры доступны. Это может привести к ошибкам, особенно в сложных маршрутах.
Забытый
useEffect: если вы извлекаете параметры и используете их для запроса данных, важно следить за их изменением. Не забудьте указать параметры в списке зависимостейuseEffect.Необработанный случай
undefined: если параметр необязательный, всегда обрабатывайте случай, когда он отсутствует.
Пример неправильной реализации:
const Component = () => {
const { id } = useParams<{ id: string }>();
// Ошибка: предполагается, что id всегда существует
return <p>ID: {id.toUpperCase()}</p>;
};
Решение: добавьте проверку наличия id:
const Component = () => {
const { id } = useParams<{ id?: string }>();
if (!id) {
return <p>Параметр ID отсутствует.</p>;
}
return <p>ID: {id.toUpperCase()}</p>;
};
Почему это важно? Применение в реальных проектах
Обработка параметров маршрутов — это ключевая функциональность любого приложения, работающего с динамическим контентом. Интернет-магазины, платформы для блогов, социальные сети — все они используют параметры для определения, какой контент показывать. Например:
- Профиль пользователя:
https://app.com/user/123 - Категории и фильтры:
https://shop.com/category/phones/brand-apple - Динамическая панель управления:
https://admin.com/dashboard/:section
Умение грамотно обрабатывать параметры маршрутов с помощью useParams значительно упростит вашу работу с подобными приложениями.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ