Ответ
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для передачи данных между родителем и дочерними компонентами
Ответ 18+ 🔞
Слушай, а вот есть в этом вашем React Router такая штука — Outlet. Ну, это типа дырка в коде, куда другие компоненты проваливаются, как в унитаз, когда URL подходящий.
Смотри, как это выглядит, блядь:
import { Outlet } from 'react-router-dom';
function Layout() {
return (
<div>
<header>Вот эта наша шапка, да</header>
<main>
<Outlet /> {/* А вот тут, ёпта, будет магия! Сюда прилетает всё, что нужно */}
</main>
<footer>Ну и подвальчик, куда ж без него</footer>
</div>
);
}В чём прикол-то, спросишь? А прикол в том, что:
- Это как матрёшка, блядь. Внутри одного маршрута можно другие пихать — вложенные, короче.
- Родительский компонент (наш
Layout) не сходит с ума и не перерисовывается с нуля каждый раз. Он стоит себе, как скала, а внутри у него в этой дырке (<Outlet />) контент меняется. Удобно же, ёбана! - Ещё можно из родителя в детей данные протолкнуть, типа
useOutletContext. Ну, чтобы не орать через всё приложение, а шепнуть на ушко прямо вOutlet. Хитрая жопа, но работает.