Маршрутизация с useParams в React

Что такое useParams и зачем он нужен?

Когда вы работаете с приложением на React, вам часто приходится показывать разные страницы или компоненты в зависимости от URL. Например, вы создаёте блог, где у каждого поста есть свой идентификатор, и хотите показать страницу с содержимым поста, основываясь на этом ID. Вот где вступает в игру useParams.

useParams — это хук из библиотеки React Router, который позволяет извлекать параметры из текущего URL. Эти параметры могут быть частью динамического маршрута, например, /post/:id, где :id — это переменная, которую можно использовать в коде.

Как настроить React Router

Для начала, убедитесь, что в вашем проекте установлен React Router. Если он ещё не установлен, добавьте его с помощью команды:

npm install react-router-dom

После установки настройте маршруты в своём приложении. Например, у вас есть базовый компонент App, где вы определяете маршруты:

import React from "react";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./Home";

import Post from "./Post";



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/post/:id" element={<Post />} />

      </Routes>

    </Router>

  );

}



export default App;

В этом примере определены два маршрута: один для главной страницы / и один для страницы поста /post/:id. Здесь :id — динамический параметр.

Как использовать useParams в компонентах

Теперь, когда маршруты настроены, давайте посмотрим, как извлекать параметры в компоненте с помощью useParams.

Пример использования useParams в компоненте Post:

import React from "react";

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



function Post() {

  const { id } = useParams(); // Извлекаем параметр id из URL



  return (

    <div>

      <h1>Пост ID: {id}</h1>

      <p>Это страница для поста с идентификатором {id}.</p>

    </div>

  );

}



export default Post;

Как это работает:

useParams возвращает объект, содержащий параметры из URL. В нашем случае это будет { id: 'значение' }.

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

Применение useParams для создания динамических приложений

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

1. Загрузка данных на основе параметра

Представьте, что вы хотите загрузить данные о посте с сервера. Вы можете использовать useParams, чтобы извлечь ID поста, а затем выполнить запрос к API.

Пример:

import React, { useEffect, useState } from "react";

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



function Post() {

  const { id } = useParams();

  const [post, setPost] = useState(null);



  useEffect(() => {

    // Загрузка данных с API

    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)

      .then((response) => response.json())

      .then((data) => setPost(data));

  }, [id]); // Обновление при изменении id



  if (!post) {

    return <p>Загрузка...</p>;

  }



  return (

    <div>

      <h1>{post.title}</h1>

      <p>{post.body}</p>

    </div>

  );

}



export default Post;

Как это работает:

Параметр id извлекается из URL.

Хук useEffect выполняет запрос к API при первом рендере или при изменении id.

Когда данные загружаются, они сохраняются в состоянии post и отображаются в компоненте.

2. Вложенные маршруты с параметрами

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

Пример настройки вложенных маршрутов:

import React from "react";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Categories from "./Categories";

import Post from "./Post";



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/categories" element={<Categories />}>

          <Route path=":categoryId/post/:id" element={<Post />} />

        </Route>

      </Routes>

    </Router>

  );

}



export default App;

В компоненте Post вы всё так же можете использовать useParams для извлечения параметров categoryId и id.

Пример извлечения нескольких параметров:

function Post() {

  const { categoryId, id } = useParams();



  return (

    <div>

      <h1>Категория: {categoryId}</h1>

      <h2>Пост ID: {id}</h2>

    </div>

  );

}