Outlet

Définition

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

import { Outlet } from 'react-router'; // v7+/v8 : plus de react-router-dom

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

Cas d'usage

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

Termes liés

Sources

• reactrouter.com/changelog