Метрики производительности

React Router — это библиотека для управления навигацией в приложениях на React. Она позволяет создавать динамические маршруты, управлять историей браузера и реализовывать условный рендеринг компонентов в зависимости от URL. Основные элементы библиотеки — это BrowserRouter, Routes, Route, Link, Navigate и Outlet.

  • BrowserRouter: Обертка всего приложения, обеспечивающая работу с историей браузера через HTML5 History API.
  • Routes: Контейнер для всех маршрутов приложения.
  • Route: Определяет соответствие между URL и компонентом.
  • Link: Используется для перехода между маршрутами без перезагрузки страницы.
  • Navigate: Программное перенаправление на другой маршрут.
  • Outlet: Контейнер для рендеринга вложенных маршрутов.

Настройка маршрутов

Маршруты задаются с помощью компонента <Route> внутри <Routes>:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile/:userId" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}
  • path задает путь маршрута.
  • element — компонент, который будет отрендерен при совпадении URL.
  • Динамические сегменты (например, :userId) позволяют использовать параметры URL в компоненте через хук useParams.

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

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

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

Outlet в компоненте Dashboard указывает место, где будут рендериться дочерние маршруты:

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

Навигация и программные переходы

Для навигации используют компонент Link:

<Link to="/about">О нас</Link>

Для программного перенаправления применяется хук useNavigate:

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

function Home() {
  const navigate = useNavigate();
  const goToProfile = () => navigate('/profile/123');
  
  return <button onCl ick={goToProfile}>Перейти в профиль</button>;
}

Обработка параметров URL и состояния навигации

  • useParams — получает параметры маршрута:
import { useParams } from 'react-router-dom';

function Profile() {
  const { userId } = useParams();
  return <div>Пользователь: {userId}</div>;
}
  • useLocation — предоставляет объект текущего URL, включая состояние:
import { useLocation } from 'react-router-dom';

function Page() {
  const location = useLocation();
  console.log(location.pathname, location.state);
}
  • useSearchParams — управление query-параметрами:
import { useSearchParams } from 'react-router-dom';

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');
  return <div>Поиск: {query}</div>;
}

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

Для ограничения доступа к определенным маршрутам используют условный рендеринг с Navigate:

function ProtectedRoute({ isAuth, children }) {
  return isAuth ? children : <Navigate to="/login" />;
}

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

<Route
  path="/profile"
  element={
    <ProtectedRoute isAuth={userLoggedIn}>
      <Profile />
    </ProtectedRoute>
  }
/>

Оптимизация и lazy loading

Для повышения производительности рекомендуется использовать ленивую загрузку компонентов с React.lazy и Suspense:

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

<Route
  path="/about"
  element={
    <Suspense fallback={<div>Загрузка...</div>}>
      <About />
    </Suspense>
  }
/>

Дополнительные возможности

  • Nested layouts: можно создавать шаблоны для различных разделов приложения.
  • Index routes: маршрут по умолчанию для родительского маршрута.
  • Relative routing: позволяет указывать пути относительно текущего маршрута, упрощая структуру вложенных маршрутов.
  • Scroll restoration: управление скроллом при навигации.

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

Оглавление