Создание современного веб-приложения невозможно представить без навигации. Как пользователь попадёт с главной страницы на страницу «О нас»? Как переключаться между страницами, не перезагружая сайт? Здесь на помощь приходит React Router — библиотека, которая превращает ваше React-приложение в полноценное одностраничное приложение (SPA) с плавной навигацией.

Сегодня мы разберём, что такое React Router, как с ним работать, и создадим простое приложение с двумя страницами: «Главная» и «О нас».

Что такое React Router и почему он важен?

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

• Переключаться между страницами без перезагрузки браузера.
• Управлять URL-адресами и отображать соответствующие компоненты.
• Создавать маршруты (routes) с динамическими путями и параметрами.
• Организовать навигацию (например, через меню или ссылки).

Почему это важно?

• Плавность работы: Пользователь не замечает, что приложение обновляет только часть интерфейса.
• Мгновенная загрузка: Нет необходимости загружать всю страницу заново.
• Логическая структура: Маршруты помогают организовать приложение по страницам.

Основные компоненты React Router

React Router предоставляет несколько ключевых компонентов для работы с маршрутами. Разберём их.

BrowserRouter

BrowserRouter оборачивает ваше приложение и отвечает за работу маршрутизации. Он отслеживает изменения в URL-адресе и подставляет соответствующий компонент.

Пример:

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

function App() {
  return (
    <BrowserRouter>
      {/* Здесь будут маршруты */}
    </BrowserRouter>
  );
}

Routes и Route

Компонент Routes содержит список всех маршрутов вашего приложения, а Route определяет, какой компонент отображать по определённому пути.

Пример:

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

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

path — путь в URL (например, /about).

element — компонент, который отображается для этого пути.

Link

Link заменяет стандартные HTML-ссылки (<a>). Вместо того чтобы перезагружать страницу, он обновляет URL и перенаправляет на соответствующий маршрут.

Пример:

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

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

Практика: приложение с двумя страницами

Создадим приложение с двумя страницами:

• «Главная»: с приветственным текстом.
• «О нас»: с информацией о приложении.

Шаг 1: Установка React Router

Убедитесь, что React Router установлен в вашем проекте. Если его нет, добавьте:

npm install react-router-dom

Шаг 2: Настройка маршрутов

В App.jsx создайте маршруты:

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

function Home() {
  return <h1>Добро пожаловать на главную страницу!</h1>;
}

function About() {
  return <h1>О нас: это простое React-приложение.</h1>;
}

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

export default App;

Шаг 3: Добавление навигации

Добавим компонент Navbar для навигации между страницами:

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

function Navbar() {
  return (
    <nav style={navStyle}>
      <Link to="/" style={linkStyle}>Главная</Link>
      <Link to="/about" style={linkStyle}>О нас</Link>
    </nav>
  );
}

const navStyle = {
  display: 'flex',
  justifyContent: 'space-around',
  padding: '10px',
  backgroundColor: '#282c34',
};

const linkStyle = {
  color: 'white',
  textDecoration: 'none',
  fontSize: '18px',
};

export default Navbar;

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

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

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

Запустите проект:

npm run dev

Откройте приложение в браузере. Вы увидите навигационное меню:

• При клике на «Главная» отображается приветственное сообщение.
• При клике на «О нас» — информация о приложении.

Дополнительное улучшение: стилизация страниц

Добавьте стили для страниц:

function Home() {
  return (
    <div style={pageStyle}>
      <h1>Добро пожаловать на главную страницу!</h1>
      <p>Это простой пример использования React Router.</p>
    </div>
  );
}

function About() {
  return (
    <div style={pageStyle}>
      <h1>О нас</h1>
      <p>Это приложение демонстрирует основы маршрутизации в React.</p>
    </div>
  );
}

const pageStyle = {
  textAlign: 'center',
  padding: '20px',
  fontFamily: 'Arial, sans-serif',
};

Итоги

Сегодня мы узнали:

• Что такое React Router и как он помогает создавать плавную навигацию в приложениях.
• Основные компоненты React Router:
  • BrowserRouter для управления маршрутизацией.
  • Routes и Route для определения путей.
  • Link для создания ссылок без перезагрузки.
• На практике мы создали простое приложение с двумя страницами и навигацией.

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