Outlet

React 🟡 Mid

Definition

Composant React Router qui rend la route enfant correspondante dans un layout parent, permettant des layouts imbriques partageant du UI commun.

Analogie

Comme un cadre photo dans un salon : le salon (layout) reste, mais la photo (enfant) change selon la page.

Exemple de code

function Layout() {
  return (
    <div>
      <Navbar />
      <main><Outlet /></main> {/* route enfant ici */}
      <Footer />
    </div>
  );
}

Cas d'usage

Layouts partages (sidebar, header, footer) avec du contenu qui change selon la route active.

Termes lies

#routing