Що робить <Outlet>?

ReactJunior~1 хв читання

Що робить `<Outlet>`

<Outlet> - це "точка вставки" (placeholder), в яку React Router рендерить вміст вкладеного маршруту.

Якщо у тебе є батьківський маршрут (наприклад, /dashboard), і в ньому є дочірні (/dashboard/profile, /dashboard/settings), то саме <Outlet> визначає, де всередині Dashboard відображатиметься дочірня сторінка.

Приклад

javascript

import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Profile from "./Profile";
import Settings from "./Settings";

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Компонент Dashboard може виглядати так:

javascript

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

function Dashboard() {
  return (
    <div>
      <h1>Панель керування</h1>
      <nav>
        <Link to="profile">Профіль</Link>
        <Link to="settings">Налаштування</Link>
      </nav>

      {/* Тут буде вставлятися дочірній маршрут */}
      <Outlet />
    </div>
  );
}

Як це працює

URL	Що рендериться
`/dashboard`	`<Dashboard>` (поки без вмісту `<Outlet>`)
`/dashboard/profile`	`<Dashboard>` → `<Outlet>` → `<Profile>`
`/dashboard/settings`	`<Dashboard>` → `<Outlet>` → `<Settings>`

<Outlet> = "встав сюди вміст дочірнього маршруту".

Приклад структури

javascript

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

Відображення (візуально):

javascript

Dashboard
 ├── Profile  ← вставляється в <Outlet>
 └── Settings ← вставляється в <Outlet>

Навіщо потрібен `<Outlet>`

Завдання	Навіщо потрібен `<Outlet>`
Layout-компоненти	Створення сторінок зі спільним шаблоном (header, sidebar, footer)
Перевикористання UI	Спільний дизайн для всіх підсторінок
Nested routes	Можливість вкладеної навігації
Ізоляція піддерев	Можна використовувати різні `<Outlet>` на різних рівнях вкладеності

Приклад layout зі спільним UI

javascript

function AppLayout() {
  return (
    <div>
      <Header />
      <Sidebar />
      <main>
        {/* Всередину потраплять усі дочірні сторінки */}
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

І маршрути:

javascript

<Route path="/" element={<AppLayout />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="contact" element={<Contact />} />
</Route>

Тепер:

/ → <Home /> вставляється в <Outlet />
/about → <About />
/contact → <Contact />

Header, Sidebar і Footer залишаються спільними для всіх сторінок.

Можна використовувати кілька рівнів `<Outlet>`

javascript

<Route path="/app" element={<AppLayout />}>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route path="settings" element={<Settings />} />
  </Route>
</Route>

Візуально:

javascript

<AppLayout>
  <DashboardLayout>
    <Settings />
  </DashboardLayout>
</AppLayout>

Кожен layout має свій <Outlet>, і кожен рівень маршрутів "вкладається" в попередній.

Важливо пам'ятати

<Outlet> працює тільки всередині маршруту, який має дочірні маршрути. Якщо дочірніх маршрутів немає, <Outlet> нічого не рендерить.
Якщо потрібно, щоб при відкритті батьківського маршруту (/dashboard) показувався контент "за замовчуванням" - додай index route:

javascript

<Route index element={<DashboardHome />} />

<Outlet> можна використовувати кілька разів у різних layout-компонентах - це не обмежено одним рівнем.

Підсумок:

<Outlet> - це спеціальний компонент React Router, який вказує місце, де повинен відображатися дочірній маршрут (nested route).

Він потрібен для:

створення layout-компонентів (header, sidebar, footer);
організації вкладеної навігації;
перевикористання спільного UI між сторінками.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.