Что такое маршрутизация и её роль в React — react-router-dom

Что такое маршрутизация и зачем она нужна

Проблема одностраничных приложений

Когда мы создаем одностраничные приложения (Single Page Applications, SPA) с React, весь наш интерфейс, по сути, живёт в одном HTML-файле. Это удобно, быстро и позволяет нам управлять состоянием без перезагрузок страницы. Но есть одна проблема: как пользователю перемещаться между "страницами"? Например, как отобразить главную страницу, страницу профиля или страницу товаров?

Вот тут-то и приходит на помощь маршрутизация. Маршрутизация позволяет связывать определённые URL-адреса с компонентами и динамически изменять отображаемое содержимое в зависимости от текущего адреса.

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

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

React Router Dom как инструмент маршрутизации

React Router — это одна из самых популярных библиотек для маршрутизации в React-приложениях. Она дает разработчику возможность:

• Переключать компоненты в зависимости от текущего URL.
• Создавать вложенные и динамические маршруты.
• Добавлять защищённые маршруты для авторизованных пользователей.
• Легко управлять историей браузера.

В этой лекции мы будем работать с библиотекой react-router-dom, которая является частью React Router и предназначена специально для приложений, работающих в браузере.

Структура маршрутизации

В react-router-dom используются три основных компонента:

1. BrowserRouter — "коробка", которая управляет маршрутизацией. Это контейнер для всех ваших маршрутов.

2. Route — определяет путь и указывает, какой компонент нужно отображать, если путь совпадает.

3. Switch (или Routes в версиях 6.x) — обрабатывает набор маршрутов и отображает только тот, который соответствует текущему URL.

Пример на пальцах

Если URL выглядит так:

/home

react-router-dom определяет, что нужно отобразить, например, компонент <Home />.

Если он такой:

/profile

Мы покажем компонент <Profile />.

Почему маршрутизация важна в React-приложениях

1. Пользовательский опыт

Маршрутизация делает приложения удобнее для пользователей. Переключение между страницами или разделами приложения происходит быстро и без перезагрузки. Это улучшает UX (User Experience), потому что пользователи не хотят видеть белый экран на полсекунды при переходе по сайту.

2. Интеграция с историей браузера

React Router заботится о навигации: вы можете использовать кнопки "Назад" и "Вперед" в браузере. Это особенно важно для приложений с большим количеством переходов между "страницами". Например, интернет-магазины или социальные сети.

3. Легкость поддержки и масштабируемость

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

Установка react-router-dom

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

npm install react-router-dom

Если вы используете Yarn, то выполните:

yarn add react-router-dom

После успешной установки убедитесь, что в вашем package.json появилась новая зависимость:

"dependencies": {
  "react-router-dom": "^6.14.0"
}

Пример использования react-router-dom

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

Шаг 1: Настройка BrowserRouter

Создайте файл App.tsx и импортируйте BrowserRouter:

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

// Простые образцы компонентов для маршрутов
const Home = () => <h1>Главная страница</h1>;
const About = () => <h1>О нас</h1>;
const Contact = () => <h1>Контакты</h1>;

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

export default App;

Шаг 2: Запуск приложения

Запустите приложение с помощью команды:

npm start

Откройте браузер и перейдите на путь /, /about, /contact. В зависимости от URL вы должны увидеть разные страницы.

Как это работает "под капотом"

Когда вы используете BrowserRouter, он следит за изменениями URL в адресной строке браузера. Компоненты Route определяют, какой контент нужно отобразить, если текущая локация совпадает с указанным путём.

Основные преимущества и особенности

1. Легкость интеграции

react-router-dom легко интегрируется в проекты любого масштаба. Вы можете добавить маршрутизацию в существующее приложение за считаные минуты.

2. Динамические возможности

Вы можете настраивать доступ к маршрутам, использовать параметры, создавать вложенные маршруты, работать с динамическими данными — всё это под капотом react-router-dom.

3. Типизация с TypeScript

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