Что такое Outlet

Outlet — это компонент в React Router (v6+), который используется для рендеринга дочерних маршрутов. Он работает как placeholder, куда вставляются компоненты, соответствующие текущему URL.

Пример:

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

function Layout() {
  return (
    <div>
      <header>Шапка сайта</header>
      <main>
        <Outlet /> {/* Здесь появятся дочерние компоненты маршрутов */}
      </main>
      <footer>Подвал</footer>
    </div>
  );
}

Особенности:

• Позволяет создавать вложенные маршруты
• Сохраняет состояние родительского компонента при переключении дочерних
• Может использоваться с useOutletContext для передачи данных между родителем и дочерними компонентами