React Router: установка и маршрутизация для SPA

Ноутбук с общей темой WordPress

Кратко

Краткое практическое руководство по установке и использованию React Router v6 для одностраничных приложений (SPA). Покрыты установка, базовые и вложенные маршруты, компоненты Link и NavLink, а также советы по отладке и деплою.

Введение

Single Page Application (SPA) — это веб-сайт или веб-приложение, которое динамически заменяет содержимое страницы без полной перезагрузки. В React-приложениях компоненты получают данные и отрисовывают их в одном HTML-файле.

React Router — библиотека для управления маршрутами (URL) внутри SPA. Она позволяет отображать нужный компонент по URL, организовывать вложенные маршруты, навигацию и работать с параметрами пути.

Определение терминов (в одну строку каждое):

SPA: веб-приложение, где навигация не вызывает полной перезагрузки страницы.
Маршрут: соответствие между URL и компонентом, который должен отобразиться.
Outlet: компонент, служащий «плейсхолдером» для дочерних маршрутов.

Когда использовать React Router

Важно использовать React Router, если приложение:

требует управления URL (закладок, прямых ссылок);
имеет разные экраны/страницы с уникальными адресами;
должен поддерживать историю браузера и ссылочную навигацию.

Не нужен React Router, если приложение — чистый виджет без адресации или если навигация реализуется вне React.

Как установить React Router

Установите пакет react-router-dom v6 (рекомендуемая стабильная ветка для большинства проектов). В корне проекта запустите одну из команд:

npm i react-router-dom

или

yarn add react-router-dom@6

Совет: фиксируйте мажорную версию в package.json, чтобы избежать несовместимости при автоматическом обновлении.

Настройка BrowserRouter

Откройте файл index.js (или index.jsx) и оберните корневой компонент в BrowserRouter, чтобы весь дерево компонентов могло пользоваться маршрутизатором:

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  
    
  
);

BrowserRouter использует History API браузера. Для проектов, где нужно поддерживать старые сервера или статическую доставку, рассмотрите HashRouter (использует хеш # в URL).

Простой пример маршрутов

Создадим маршруты Home, About и Blog внутри App:

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

function App() {
  return (
    
      } />
      } />
      } />
    
  );
}

export default App;

Пояснения:

Routes — контейнер для Route.
Route принимает path (путь) и element (компонент для рендера).
Путь ‘/‘ — корневой маршрут, обычно рендерит главную страницу.

Навигация: Link и NavLink

Для навигации используйте компонент Link вместо обычной ссылки , чтобы предотвратить перезагрузку страницы:

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

function Home() {
  return (
    
      О нас
      Блог
      Это главная страница
    
  );
}

export default Home;

NavLink — похож на Link, но позволяет стилизовать активную ссылку (например, добавить класс active):

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

 isActive ? 'active' : ''}>Блог

Вложенные маршруты и Outlet

React Router поддерживает вложенные маршруты, когда несколько маршрутов логически принадлежат одному разделу. Для этого используют компонент Outlet в родительском компоненте.

Пример структуры:

/article (список)
/article/new (форма создания)
/article/1 (страница статьи)

Компонент маршрутов можно организовать так:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

Обратите внимание на относительные пути дочерних маршрутов: внутри родителя путь ‘new’ соответствует ‘/article/new’. Для рендера дочерних компонентов используйте Outlet в компоненте-лейауте:

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

function ArticleLayout() {
  return (
    
      Статьи
      
    
  );
}

Затем в маршрутизации указывайте элемент родителя, если нужен общий компонент-обёртка:

}>
  } />
  } />
  } />

Параметры пути и хук useParams

Чтобы объявить параметр маршрута, используйте двоеточие в пути, затем читайте его через useParams:

// маршрут
} />

// компонент
import { useParams } from 'react-router-dom';

function Article() {
  const { id } = useParams();
  // id — строка из URL, например '1'
  return Статья #{id};
}

useParams возвращает объект со строковыми значениями параметров.

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

Для перехода по коду (например, после отправки формы) используйте useNavigate:

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

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

  const onSubmit = () => {
    // логика сохранения
    navigate('/article'); // переход к списку статей
  };

  return ...;
}

navigate поддерживает относительные переходы и замену записи истории (replace: true).