React Academy · Lektion

Nästlade routes och Outlet-layouts

Bygg layoutar med flera routenivåer med nästlade och komponenten .

Lektion 1 av 413 steg

Nästlade routes och Outlet-layouts är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Vad är nästlade routes?

Nästlade routes i React Router v6 låter er komponera layouter: en överordnad route renderar ett skal (navigering, sidofält) och underordnade routes fyller innehållsområdet via <Outlet />.

Definiera nästlade routes

Placera underordnade <Route>-element inuti en överordnad <Route> i routerkonfigurationen. Den överordnade routens sökväg är ett prefix för alla underordnade routes.

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

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

Outlet-komponenten

<Outlet /> är en platshållare i den överordnade layoutkomponenten. React Router ersätter den med elementet för den matchade underordnade routen.

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

Index-routes

En route med index: true renderas när den överordnade routens URL matchar exakt och fungerar som standardroute när ingen annan underordnad sökväg matchar.

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

Nästling på flera nivåer

Routes kan nästlas på flera nivåer. Varje layoutkomponent i kedjan renderar ett <Outlet /> för sina egna underordnade routes.

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

Outlet-kontext

Skicka data från en layout till nästlade underordnade routes via prop-en context på <Outlet /> och läs den med useOutletContext() i de underordnade komponenterna.

// 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>;
}

Layouter med routes utan sökväg

En route utan path omsluter underordnade routes enbart för layoutens skull, utan att lägga till ett URL-segment. Det är användbart för att gruppera routes under en gemensam layout.

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

Relativa länkar i nästlade routes

Inuti en nästlad route tolkas <Link to='sibling'> relativt till den aktuella routens sökväg, precis som relativa URL:er i HTML.

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

useMatch i nästlade routes

useMatch(pattern) returnerar matchningsdata när den aktuella URL:en matchar mönstret och är användbart för att utforma aktiva länkar i nästlade layouter.

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

Felgränser per segment

Lägg till en errorElement i valfri nästlad route för att fånga fel endast i det segmentet utan att hela layoutskalet kraschar.

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

Praktiskt mönster: dashboard-layout

En typisk dashboard använder en route på toppnivå för appens skal (header och sidofält) med nästlade routes för varje sektion. Då förblir skalet monterat medan endast innehållsområdet ändras.

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

Snabbkontroll

Vilken komponent måste en överordnad layout rendera för att visa den matchade underordnade routen?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Nästlade routes låter överordnade routes rendera beständiga layouter medan underordnade routes fyller i <Outlet />. Använd index-routes för standardinnehåll, routes utan sökväg för gemensamma layouter och useOutletContext för att skicka data nedåt.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Nästlade routes och Outlet-layouts” gratis?

Ja – hela texten till ”Nästlade routes och Outlet-layouts” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Nästlade routes och Outlet-layouts”?

Bygg layoutar med flera routenivåer med nästlade och komponenten . Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Nästlade routes och Outlet-layouts”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till React Academy