React Router — библиотека для маршрутизации и навигации в приложениях на React JS. Она позволяет создавать динамические маршруты (routes), обеспечивая плавный интерфейс пользователя за счёт сопоставления различных URL с компонентами. React Router позволяет организовать навигацию в одностраничном приложении (single-page application, SPA) без перезагрузки всей страницы.
В этой статье вы познакомитесь с основами React Router, его возможностями, процессом установки и тем, как реализовать маршрутизацию в React-приложении.
Что такое React Router?
React Router — это стандартная библиотека для создания динамических маршрутов и навигации в приложениях на React JS. Она позволяет управлять навигацией в приложении через определение маршрутов, которые связывают URL-пути с конкретными компонентами.
Используя React Router, вы можете отображать разные представления для различных разделов приложения без полной перезагрузки страницы. Это ключевая особенность SPA, где изменяется только необходимое содержимое при переходах пользователя.
Обратите внимание, что последняя актуальная версия на сегодняшний день — react-router-dom v6.
Виды React Router
Существует три основных типа роутеров в React:
-
BrowserRouter:
Это самый распространённый роутер для современных React-приложений. Он использует HTML5 History API для управления маршрутизацией, что позволяет динамически обновлять URL и синхронизировать адресную строку и историю в браузере. -
HashRouter:
HashRouter использует хэш (часть URL после символа#) вместо History API. Такой подход не требует настроек сервера и работает даже если сервер не поддерживает перезапись URL. - MemoryRouter:
MemoryRouter применяется в средах без браузера, например, в React Native либо при запуске тестов.
Особенности React Router
-
Декларативная маршрутизация (Declarative Routing):
В версии v6 используются компоненты<Routes>и<Route>, которые позволяют описывать маршруты декларативно, делая конфигурацию маршрутов простой и понятной. -
Вложенные маршруты (Nested Routes):
React Router поддерживает вложенные маршруты, что упрощает организацию приложения с иерархической структурой. -
Программная навигация (Programmatic Navigation):
ХукuseNavigateпозволяет программно управлять переходами между маршрутами на основании условий или действий пользователя. -
Параметры маршрутов (Route Parameters):
Позволяет создавать динамические маршруты с параметрами, которые могут соответствовать множеству URL-шаблонов. - Улучшенная поддержка TypeScript:
Обеспечивает разработку приложений с типобезопасностью, что повышает качество кода и снижает количество ошибок.
Компоненты React Router
Основные компоненты, используемые в React Router:
1. BrowserRouter и HashRouter
- BrowserRouter: использует HTML5 History API для синхронизации UI с URL.
- HashRouter: использует хэш часть URL (
window.location.hash) для синхронизации UI с URL.
<BrowserRouter>
{/* Ваши маршруты здесь */}
</BrowserRouter>
2. Routes и Route
- Routes: контейнер для всех определений маршрутов.
- Route: определяет один маршрут с путем (path) и компонентом для отображения.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
3. Link и NavLink
- Link: создаёт навигационные ссылки в приложении.
- NavLink: похож на
Link, но предоставляет дополнительные стили, когда ссылка активна.
<nav>
<NavLink to="/" activeClassName="active">Главная</NavLink>
<Link to="/about">О нас</Link>
</nav>
Шаги создания маршрутов с React Router
Шаг 1: Инициализация React-проекта
Для создания нового React-приложения выполните:
npx create-react-app react-router-example
cd react-router-example
Шаг 2: Установка React Router
Установите пакет react-router-dom версии 6:
npm install react-router-dom@6
Структура проекта
После установки в разделе зависимостей (dependencies) появится:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.24.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Пример: базовая маршрутизация в React-приложении
CSS (src/index.css)
/* src/index.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h2 {
text-align: center;
color: #333;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
nav li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #333;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
JavaScript (src/index.js)
// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
JavaScript (src/App.js)
// src/App.js
import React from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
useNavigate,
Outlet,
} from "react-router-dom";
// Компонент главной страницы
const Home = () => {
const navigate = useNavigate();
return (
<div>
<h2>Главная страница</h2>
<button onClick={() => navigate("/contact")}>Перейти на страницу контактов</button>
</div>
);
};
// Компонент страницы "О нас"
const About = () => (
<div>
<h2>Страница О нас</h2>
<nav>
<ul>
<li>
<Link to="team">Наша команда</Link>
</li>
<li>
<Link to="company">Наша компания</Link>
</li>
</ul>
</nav>
<Outlet /> {/* Рендер вложенных маршрутов */}
</div>
);
// Компоненты для других страниц
const Contact = () => <h2>Страница контактов</h2>;
const Team = () => <h2>Страница команды</h2>;
const Company = () => <h2>Страница компании</h2>;
function App() {
return (
<Router>
<nav>
<ul>
<li><Link to="/">Главная</Link></li>
<li><Link to="/about">О нас</Link></li>
<li><Link to="/contact">Контакты</Link></li>
</ul>
</nav>
{ /* Определение маршрутов для соответствующих путей */ }
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} >
<Route path="team" element={<Team />} />
<Route path="company" element={<Company />} />
</Route>
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}
export default App;
Шаг 4: Запуск приложения
Для запуска приложения используйте команду:
npm start
Использование React Router
-
Навигация и маршрутизация:
React Router предоставляет декларативный способ навигации между разными представлениями или страницами в React-приложении, позволяя переключаться между ними без перезагрузки страницы. -
Динамическая маршрутизация:
Поддержка динамической маршрутизации позволяет менять маршруты в зависимости от состояния приложения или данных, что упрощает обработку сложных сценариев навигации. -
Управление URL:
React Router помогает управлять URL вашего приложения, поддерживая глубокие ссылки, URL, которые можно сохранить в закладки, и поддерживая историю браузера. -
Компонентный подход:
Маршрутизация реализована через компоненты, что упрощает составление маршрутов и навигации в модульном и переиспользуемом виде. - Работа с вложенными маршрутами:
Вложенные маршруты позволяют создавать более структурированное и организованное отображение контента, что особенно полезно для больших приложений с комплексной структурой.
🔑 Ключевые моменты:
- React Router обеспечивает удобную и современную маршрутизацию для SPA на React без перезагрузки страниц.
- В версии v6 используются декларативные компоненты
<Routes>и<Route>для простоты настройки маршрутов. - Существует несколько видов роутеров (BrowserRouter, HashRouter, MemoryRouter), выбираемых в зависимости от задачи.
- Поддерживается вложенная маршрутизация и программная навигация с помощью хука
useNavigate. - React Router помогает управлять URL и историей браузера, улучшая UX и SEO одностраничных приложений.
