0Pricing
React Academy · Урок

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

Создавайте многоуровневые макеты маршрутов с помощью вложенных и компонента .

«Вложенные маршруты и макеты Outlet» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое вложенные маршруты

Вложенные маршруты в React Router v6 позволяют составлять макеты: родительский маршрут отображает оболочку (навигацию и боковую панель), а дочерние маршруты заполняют область содержимого через <Outlet />.

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

Поместите дочерние элементы <Route> внутрь родительского <Route> в конфигурации маршрутизатора. Путь родительского маршрута является префиксом для всех дочерних маршрутов.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

Компонент Outlet

<Outlet /> — это заполнитель в компоненте родительского макета. React Router заменяет его элементом соответствующего дочернего маршрута.

function RootLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

Индексные маршруты

Маршрут с параметром index: true отображается, когда URL родительского маршрута совпадает точно. Он служит дочерним маршрутом по умолчанию, если путь другого дочернего маршрута не совпадает.

{
  path: '/',
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> }, // renders at '/'
    { path: 'about', element: <About /> },
  ],
}

Многоуровневая вложенность

Маршруты могут быть вложены на несколько уровней. Каждый компонент макета в этой цепочке отображает <Outlet /> для своих дочерних маршрутов.

const router = createBrowserRouter([
  {
    path: '/app',
    element: <AppShell />,
    children: [
      {
        path: 'users',
        element: <UsersLayout />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> },
        ],
      },
    ],
  },
]);

Контекст Outlet

Передавайте данные из макета во вложенные дочерние маршруты через свойство context элемента <Outlet />, а в дочерних маршрутах считывайте их с помощью useOutletContext().

// Parent layout
function UsersLayout() {
  const [selected, setSelected] = useState(null);
  return <Outlet context={{ selected, setSelected }} />;
}

// Child route
function UserDetail() {
  const { selected } = useOutletContext();
  return <div>{selected}</div>;
}

Именованные макеты с маршрутами без пути

Маршрут без свойства path оборачивает дочерние маршруты только для создания макета и не добавляет сегмент URL. Это удобно для объединения маршрутов в общем макете.

{
  element: <AuthenticatedLayout />, // no path
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/billing', element: <Billing /> },
  ],
}

Относительные ссылки во вложенных маршрутах

Во вложенном маршруте <Link to='sibling'> разрешается относительно пути текущего маршрута, так же как относительные URL в HTML.

// Inside /app/users — link goes to /app/users/new
function UserList() {
  return <Link to="new">Add User</Link>;
}

useMatch во вложенных маршрутах

useMatch(pattern) возвращает данные о совпадении, когда текущий URL соответствует шаблону. Это удобно для стилизации активных ссылок во вложенных макетах.

function NavLink({ to, children }) {
  const match = useMatch(to);
  return (
    <Link to={to} className={match ? 'active' : ''}>
      {children}
    </Link>
  );
}

Границы ошибок для каждого сегмента

Добавьте errorElement в любой вложенный маршрут, чтобы перехватывать ошибки только в этом сегменте и не приводить к сбою всей оболочки макета.

{
  path: 'users',
  element: <UsersLayout />,
  errorElement: <UsersError />,
  children: [
    { path: ':id', element: <UserDetail /> },
  ],
}

Практический шаблон: макет панели управления

Обычно панель управления использует маршрут верхнего уровня для оболочки приложения (заголовок и боковая панель) и вложенные маршруты для каждого раздела. Оболочка остаётся смонтированной, а меняется только область содержимого.

function DashboardShell() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

Быстрая проверка

Какой компонент должен отображать родительский макет, чтобы показать соответствующий дочерний маршрут?

Итоги

Вложенные маршруты позволяют родительским маршрутам отображать постоянные макеты, а дочерним маршрутам — заполнять <Outlet />. Используйте индексные маршруты для дочерних маршрутов по умолчанию, маршруты без пути для общих макетов, а useOutletContext — для передачи данных вниз по дереву.

Часто задаваемые вопросы

Урок «Вложенные маршруты и макеты Outlet» бесплатный?

Да — полный текст урока «Вложенные маршруты и макеты Outlet» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Вложенные маршруты и макеты Outlet»?

Создавайте многоуровневые макеты маршрутов с помощью вложенных и компонента . Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Вложенные маршруты и макеты Outlet»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Вложенные маршруты и макеты Outlet
  2. Загрузчики и действия (API маршрутизатора данных)
  3. Защищённые маршруты и охрана авторизации
  4. Управление состоянием в параметрах поиска URL
← Назад к React Academy