Layout routes

Layout Routes — это мощный инструмент для организации маршрутов в приложении React, позволяющий создавать повторно используемые макеты страниц и управлять вложенной маршрутизацией. Они обеспечивают чистую структуру кода и упрощают поддержку интерфейса, где несколько страниц используют один и тот же шаблон.

Основы Layout Routes

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

Пример базового layout:

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

function MainLayout() {
  return (
    <div>
      <header>
        <h1>Моё приложение</h1>
        <nav>
          <a href="/">Главная</a>
          <a href="/about">О нас</a>
        </nav>
      </header>
      <main>
        <Outlet />
      </main>
      <footer>© 2026</footer>
    </div>
  );
}

export default MainLayout;

Ключевой момент: компонент Outlet — это место, где будут рендериться все вложенные маршруты. Без него layout не сможет отображать содержимое дочерних страниц.

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

Вложенные маршруты задаются через массив объектов маршрутов или JSX с использованием <Route>:

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

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

export default App;

Здесь MainLayout является родительским маршрутом, а Home и About — его вложенными маршрутами. Атрибут index указывает на маршрут по умолчанию для layout.

Преимущества использования Layout Routes

  1. Повторное использование компонентов: общий header, sidebar, footer не нужно дублировать на каждой странице.
  2. Чистая структура маршрутов: вложенные маршруты логически группируются внутри layout.
  3. Гибкость навигации: легко добавлять новые страницы, которые автоматически наследуют layout.
  4. Поддержка вложенной логики: можно создавать несколько уровней layout, например, для админ-панели отдельно от публичных страниц.

Множественные уровни Layout

React Router позволяет вкладывать layout друг в друга, создавая иерархию. Пример с публичной и админской частью приложения:

function AdminLayout() {
  return (
    <div>
      <nav>Админ меню</nav>
      <Outlet />
    </div>
  );
}

<Routes>
  <Route path="/" element={<MainLayout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="admin" element={<AdminLayout />}>
      <Route index element={<AdminDashboard />} />
      <Route path="users" element={<AdminUsers />} />
    </Route>
  </Route>
</Routes>

В этом примере AdminLayout вложен в MainLayout, что позволяет наследовать общий интерфейс и одновременно иметь специфический админский шаблон.

Lazy Loading и Layout Routes

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

import { lazy, Suspense } from "react";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

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

Использование Suspense позволяет отображать индикатор загрузки при асинхронной подгрузке страниц.

Советы по структуре Layout Routes

  • Использовать один основной layout для всей публичной части приложения.
  • Создавать отдельные layout для уникальных разделов, например, админка, профиль пользователя.
  • Стараться избегать вложенности глубже 2–3 уровней, чтобы не усложнять навигацию и не терять контроль над маршрутами.
  • Разделять логику и визуальные компоненты layout: header, footer, sidebar лучше держать отдельно и подключать в layout.

Управление навигацией внутри layout

Layout Routes позволяют использовать все возможности React Router: useNavigate, useLocation, NavLink внутри layout для динамического изменения состояния и навигации. Пример:

import { NavLink, useLocation } from "react-router-dom";

function Sidebar() {
  const location = useLocation();

  return (
    <aside>
      <NavLink to="/" className={location.pathname === "/" ? "active" : ""}>
        Главная
      </NavLink>
      <NavLink to="/about" className={location.pathname === "/about" ? "active" : ""}>
        О нас
      </NavLink>
    </aside>
  );
}

Такой подход позволяет layout быть не просто контейнером, но и интерактивным элементом интерфейса.

Layout Routes формируют основу современной структуры React-приложений, обеспечивая гибкость и масштабируемость при построении сложных интерфейсов с повторяющимися компонентами. Их правильное использование позволяет создать модульную архитектуру с легкой поддержкой и расширением функционала.

Оглавление