0Pricing
React Academy · Lezione

Route annidate e layout con Outlet

Costruisca layout con route su più livelli utilizzando annidati e il componente .

Route annidate e layout con Outlet è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cosa sono le route annidate?

Le route annidate in React Router v6 permettono di comporre i layout: una route padre esegue il rendering di una struttura (navigazione, barra laterale) e le route figlie inseriscono il contenuto nell'area designata tramite <Outlet />.

Definizione delle route annidate

Inserisca gli elementi <Route> figli all'interno di un elemento <Route> padre nella configurazione del router. Il percorso del padre è un prefisso per tutti i figli.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

Il componente Outlet

<Outlet /> è un segnaposto nel componente di layout padre. React Router lo sostituisce con l'elemento della route figlia corrispondente.

function RootLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

Route index

Una route index: true esegue il rendering quando l'URL del padre corrisponde esattamente, fungendo da figlia predefinita quando nessun altro percorso figlio corrisponde.

{
  path: '/',
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> }, // renders at '/'
    { path: 'about', element: <About /> },
  ],
}

Annidamento su più livelli

Le route possono essere annidate su più livelli. Ogni componente di layout nella catena esegue il rendering di un <Outlet /> per i propri figli.

const router = createBrowserRouter([
  {
    path: '/app',
    element: <AppShell />,
    children: [
      {
        path: 'users',
        element: <UsersLayout />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> },
        ],
      },
    ],
  },
]);

Contesto di Outlet

Passi i dati da un layout alle route figlie annidate tramite la prop context di <Outlet /> e li legga con useOutletContext() nei figli.

// Parent layout
function UsersLayout() {
  const [selected, setSelected] = useState(null);
  return <Outlet context={{ selected, setSelected }} />;
}

// Child route
function UserDetail() {
  const { selected } = useOutletContext();
  return <div>{selected}</div>;
}

Layout denominati con route senza percorso

Una route senza path avvolge i figli solo per fornire un layout, senza aggiungere un segmento all'URL. È utile per raggruppare le route sotto un layout condiviso.

{
  element: <AuthenticatedLayout />, // no path
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/billing', element: <Billing /> },
  ],
}

Link relativi nelle route annidate

All'interno di una route annidata, <Link to='sibling'> viene risolto rispetto al percorso della route corrente, proprio come gli URL relativi in HTML.

// Inside /app/users — link goes to /app/users/new
function UserList() {
  return <Link to="new">Add User</Link>;
}

useMatch nelle route annidate

useMatch(pattern) restituisce i dati della corrispondenza quando l'URL corrente corrisponde al pattern, ed è utile per applicare lo stile ai link attivi nei layout annidati.

function NavLink({ to, children }) {
  const match = useMatch(to);
  return (
    <Link to={to} className={match ? 'active' : ''}>
      {children}
    </Link>
  );
}

Error boundary per segmento

Aggiunga un errorElement a qualsiasi route annidata per intercettare gli errori solo in quel segmento, senza mandare in errore l'intera struttura del layout.

{
  path: 'users',
  element: <UsersLayout />,
  errorElement: <UsersError />,
  children: [
    { path: ':id', element: <UserDetail /> },
  ],
}

Pattern pratico: layout di una dashboard

Una dashboard tipica usa una route di livello superiore per la struttura dell'app (intestazione + barra laterale) con route annidate per ogni sezione, mantenendo la struttura montata mentre cambia solo l'area del contenuto.

function DashboardShell() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

Verifica rapida

Quale componente deve eseguire il rendering di un layout padre per visualizzare la route figlia corrispondente?

Riepilogo

Le route annidate consentono alle route padre di eseguire il rendering di layout persistenti, mentre le route figlie riempiono <Outlet />. Usi le route index per i figli predefiniti, le route senza percorso per i layout condivisi e useOutletContext per passare i dati ai livelli inferiori.

Domande Frequenti

La lezione «Route annidate e layout con Outlet» è gratuita?

Sì — il testo completo di «Route annidate e layout con Outlet» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Route annidate e layout con Outlet»?

Costruisca layout con route su più livelli utilizzando annidati e il componente . Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Route annidate e layout con Outlet»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Route annidate e layout con Outlet
  2. Loader e action (API Data Router)
  3. Route protette e guard di autenticazione
  4. Gestione dello stato nei parametri di ricerca dell'URL
← Torna a React Academy