Использование с Vite

Для начала необходимо создать проект на Vite с поддержкой React. Это делается командой:

npm create vite@latest my-app -- --template react
cd my-app
npm install

После создания проекта требуется установить React Router:

npm install react-router-dom

Импорт и настройка роутера выполняются в корневом компоненте приложения, обычно main.jsx:

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

ReactDOM.createRoot(document.getElementById("root")).render(
  
    
      
    
  
);

BrowserRouter отвечает за использование HTML5 History API для управления историей и маршрутизацией.

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

В App.jsx можно создать структуру маршрутов с помощью компонентов Routes и Route:

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home.jsx";
import About from "./pages/About.jsx";
import NotFound from "./pages/NotFound.jsx";

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

export default App;
  • path="/" — маршрут для главной страницы.
  • path="/about" — маршрут для страницы «О проекте».
  • path="*" — ловит все несуществующие маршруты и отображает страницу ошибки.

Ключевой момент: element принимает JSX-компонент, а не функцию.

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

React Router позволяет создавать вложенные маршруты для сложной структуры приложений. Например:

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

function Dashboard() {
  return (
    

      
Панель управления

      
    

  );
}

function Stats() {
  return 
Статистика
;
}

function Settings() {
  return 
Настройки
;
}

function App() {
  return (
    
      }>
        } />
        } />
      
    
  );
}
  • Outlet служит контейнером для вложенных маршрутов.
  • Подмаршруты наследуют путь родителя (dashboard/stats, dashboard/settings).

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

Для перехода между маршрутами используется компонент Link и хук useNavigate:

import { Link, useNavigate } from "react-router-dom";

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

  return (
    

      Главная
      О проекте
      
    

  );
}

Динамические маршруты

Для отображения страниц с параметрами используется синтаксис :param:

function UserProfile() {
  const { id } = useParams();
  return 
Профиль пользователя {id}
;
}


  } />
  • useParams возвращает объект с параметрами маршрута.
  • Параметры можно комбинировать с вложенными маршрутами.

Защищённые маршруты

Можно создавать маршруты с условным рендерингом для авторизации:

function ProtectedRoute({ element, isAuth }) {
  return isAuth ? element : ;
}


  } />}
  />
  • Navigate перенаправляет на другой маршрут.
  • Удобно для контроля доступа без использования сторонних библиотек.

Поддержка Vite

Vite обеспечивает быстрый HMR (Hot Module Replacement), что ускоряет разработку при работе с React Router. Важно учитывать:

  1. Базовый путь (base) в vite.config.js, если приложение будет размещено не в корне сервера.
  2. Fallback для SPA: сервер Vite автоматически перенаправляет все запросы на index.html, что обеспечивает корректную работу маршрутов с BrowserRouter.

Пример настройки vite.config.js для SPA:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    historyApiFallback: true
  },
  base: "/my-app/"
});

Lazy Loading и Suspense

Для оптимизации загрузки больших приложений рекомендуется использовать ленивую загрузку компонентов:

import { lazy, Suspense } from "react";
const About = lazy(() => import("./pages/About.jsx"));


  Загрузка...
}> } />
  • lazy загружает компонент только при переходе на маршрут.
  • Suspense отображает fallback, пока компонент не загрузился.

Работа с query-параметрами и состоянием маршрутов

Для обработки query-параметров используется хук useSearchParams:

import { useSearchParams } from "react-router-dom";

function Products() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get("category");

  return 
Категория: {category}
;
}
  • Можно менять параметры без перезагрузки страницы:
setSearchParams({ category: "books" });
  • Подходит для фильтров, сортировки и пагинации.
Оглавление