Установка и начальная настройка

Установка библиотеки

React Router — это стандартная библиотека для маршрутизации в приложениях на React, которая позволяет управлять навигацией между различными компонентами и страницами. Для её использования необходимо установить пакет через npm или yarn. В терминале проекта следует выполнить команду:

npm install react-router-dom

или, если используется yarn:

yarn add react-router-dom

После установки пакета можно импортировать необходимые компоненты для работы с маршрутизацией, такие как BrowserRouter, Routes, Route, Link и Navigate.

Настройка BrowserRouter

BrowserRouter является базовым компонентом, который оборачивает всё приложение и обеспечивает работу маршрутизации с использованием истории браузера. Его обычно размещают на самом верхнем уровне приложения:

import { BrowserRouter } from 'react-router-dom';
import App from './App';
import ReactDOM from 'react-dom/client';
import React from 'react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

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

Для организации маршрутов используется компонент Routes, внутри которого определяются отдельные Route. Каждый Route задаёт путь (path) и компонент (element), который должен отображаться при переходе на этот путь.

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

Ключевые моменты:

  • path="/" — путь, который соответствует корневой странице.
  • element={<Home />} — React-компонент, который будет отображён при совпадении пути.
  • Каждый Route должен быть вложен в Routes, иначе маршрутизация работать не будет.

Навигация между страницами

Для перехода между маршрутами используется компонент Link. Он заменяет стандартные теги <a> и предотвращает перезагрузку страницы, сохраняя преимущества SPA (Single Page Application):

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Главная</Link>
      <Link to="/about">О нас</Link>
      <Link to="/contact">Контакты</Link>
    </nav>
  );
}

export default Navbar;

Особенности использования Link:

  • Атрибут to задаёт путь маршрута, на который будет происходить переход.
  • Не вызывает полной перезагрузки страницы, в отличие от стандартного <a href="">.

Программная навигация

Иногда необходимо переходить по маршрутам программно, например, после выполнения действия или отправки формы. Для этого используется хук useNavigate:

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // логика авторизации
    navigate('/dashboard');
  };

  return (
    <button onCl ick={handleLogin}>Войти</button>
  );
}
  • useNavigate() возвращает функцию, позволяющую программно менять путь.
  • Аргумент navigate('/dashboard') задаёт путь, на который будет совершен переход.

Обработка ошибок маршрутов

Для обработки несуществующих страниц используется маршрут с символом *, который ловит все неопределённые пути:

import NotFound from './pages/NotFound';

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>
  • path="*" срабатывает на все пути, которые не соответствуют существующим маршрутам.
  • Позволяет создавать страницу 404 для улучшения пользовательского опыта.

Поддержка вложенных маршрутов

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

import Dashboard from './pages/Dashboard';
import Profile from './pages/Profile';
import Settings from './pages/Settings';

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>
  • Путь дочернего маршрута /dashboard/profile строится автоматически на основе родителя.
  • В родительском компоненте используется <Outlet /> для отображения дочерних маршрутов.
import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet />
    </div>
  );
}

Итоговая структура проекта

  • index.js — подключение BrowserRouter и рендер App.
  • App.js — определение основных маршрутов через Routes и Route.
  • components/Navbar.js — навигация с использованием Link.
  • pages/ — отдельные страницы приложения.

Эта структура обеспечивает базовую настройку React Router и готовность к созданию SPA с полноценной маршрутизацией и поддержкой вложенных маршрутов, навигации и обработки ошибок.

Оглавление