Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про React Router: router

Что такое 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 />.

Когда используется:

  • Вложенные маршруты, когда нужно добавить общую оболочку (например, шапку или подвал).

  • Для рендеринга динамического контента в зависимости от текущего дочернего маршрута.

Уровень

  • Рейтинг:

    2

  • Сложность:

    4

Навыки

  • React Router

    React Router

Ключевые слова

#router

Подпишись на React Developer в телеграм