Что такое Outlet, и когда он используется?
Этот вопрос проверяет знание компонента Outlet
Короткий ответ
Outlet — это компонент из React Router, который отображает дочерний маршрут внутри родительского компонента. Используется, когда маршруты вложены, чтобы рендерить контент дочерних маршрутов в указанном месте.
Длинный ответ
Outlet — это "пустое место" в компоненте родительского маршрута, где рендерятся дочерние маршруты. Он позволяет создавать иерархическую структуру маршрутов.
Пример использования:
Определение маршрутов:
<Routes>
<Route path="/" element={<Layout />}>
<Route path="dashboard" element={<Dashboard />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>Родительский компонент с Outlet:
const Layout = () => (
<div>
<header>Header</header>
<Outlet /> {/* Здесь рендерятся Dashboard и Settings */}
<footer>Footer</footer>
</div>
);
Как это работает:
- При переходе на /dashboard рендерятся <Header>, <Dashboard />, и <Footer>.
- При переходе на /settings рендерится <Settings /> вместо <Dashboard />.
Когда используется:
- Вложенные маршруты, когда нужно добавить общую оболочку (например, шапку или подвал).
- Для рендеринга динамического контента в зависимости от текущего дочернего маршрута.