Установка и настройка react-router-dom для маршрутизации

Установка библиотеки react-router-dom

React сам по себе не предоставляет встроенной маршрутизации. Чтобы упростить управление маршрутами, мы используем библиотеку react-router-dom. Она позволяет определять маршруты, управлять URL-адресами и подключать соответствующие компоненты.

Если бы маршрутизация в React была человеком, она бы сказала: "Я здесь, чтобы упорядочить твои хаотичные компоненты. Покажи мне URL, и я покажу тебе компонент."

Пошаговая установка

Для начала установим библиотеку в наш проект. Убедитесь, что у вас настроено окружение для работы с React.

Выполните команду в терминале:

npm install react-router-dom

Для TypeScript нужно дополнительно установить типы для библиотеки:

npm install --save-dev @types/react-router-dom

Проверить успешность установки можно, взглянув на файл package.json. В нём должны появиться следующие строки в разделе dependencies:

"dependencies": {
  "react-router-dom": "^6.x.x"
},
"devDependencies": {
  "@types/react-router-dom": "^6.x.x"
}

Проверка установки

Чтобы убедиться, что всё работает, попробуем импортировать модуль в наш проект. Добавьте в любой компонент:

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

console.log("react-router-dom успешно подключён");

Если ошибок нет, поздравляю,react-router-dom готов к использованию!

Настройка маршрутов на уровне приложения

Теперь давайте добавим маршрутизацию в проект. Для этого существует контейнер маршрутизации — BrowserRouter. Это главный компонент, который оборачивает всё приложение и позволяет управлять историей маршрутов.

Что такое BrowserRouter?

BrowserRouter использует HTML5 History API для управления URL-адресами вашего приложения. Он позволяет изменять URL без перезагрузки страницы.

Как только вы обернёте приложение в BrowserRouter, оно станет способным использовать маршруты, например, /about, /profile, /settings.

Пример использования BrowserRouter

Давайте сделаем это прямо сейчас. Откройте файл src/index.tsx и оберните корневой компонент в BrowserRouter.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom"; // Импортируем BrowserRouter
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App /> {/* Оборачиваем приложение в BrowserRouter */}
    </BrowserRouter>
  </React.StrictMode>
);

Теперь приложение готово к работе с маршрутизацией. Всё, что осталось сделать, — это настроить маршруты внутри компонента App.

Настройка базовой конфигурации маршрутов

Настроим маршруты, чтобы при посещении определённого URL отображался соответствующий компонент.

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

Route — это компонент, который сопоставляет URL с компонентом. Например:

• /about -> компонент About
• /profile -> компонент Profile

Откройте файл App.tsx и добавьте простые маршруты:

import React from "react";
import { Route, Routes } from "react-router-dom";

const Home = () => <h1>Добро пожаловать домой!</h1>;
const About = () => <h>О нас</h1>;
const Profile = () => <h1>Профиль пользователя</h1>;

const App: React.FC = () => {
  return (
    <Routes>
      {/* Определяем маршруты */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profile" element={<Profile />} />
    </Routes>
  );
};

export default App;

Вот и всё — у нас есть три маршрута! Попробуйте перейти в браузере на /about или /profile, и вы увидите разные компоненты.

Что такое Routes?

Компонент Routes заменяет старый Switch (если вы знакомы с React Router версии 5). Его задача — выбрать первый маршрут, который совпадает с текущим URL. Все остальные игнорируются.

Проверка маршрутизации

Запустим приложение:

npm start

Откройте браузер и попробуйте вручную изменить URL:

• / — показывается "Добро пожаловать домой!"
• /about — показывается "О нас"
• /profile — показывается "Профиль пользователя"

Если всё работает, значит вы всё сделали правильно!

Частые ошибки и как их избежать

Маршрутизация иногда может быть капризной. Вот несколько ошибок, с которыми вы можете столкнуться:

• Ошибка: "Uncaught Error: useRoutes() may be used only in the context of a component". Вы забыли обернуть приложение в BrowserRouter. Ппроверьте обёртку.

• Маршруты не работают. Убедитесь, что ваши маршруты начинаются с /. Например, /about, а не просто about.

• Страница не найдена. Если вы не настроили маршрут для "страницы по умолчанию", браузер покажет пустую страницу. Мы разберём это на следующей лекции.