0Pricing
React Academy · Lekcja

Zagnieżdżone trasy i układy Outlet

Budowanie wielopoziomowych układów tras za pomocą zagnieżdżonych i komponentu .

Zagnieżdżone trasy i układy Outlet to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym są zagnieżdżone trasy

Zagnieżdżone trasy w React Router v6 umożliwiają komponowanie układów: trasa nadrzędna renderuje szkielet (nawigację i pasek boczny), a trasy podrzędne wypełniają obszar treści za pomocą <Outlet />.

Definiowanie zagnieżdżonych tras

Umieść elementy podrzędne <Route> wewnątrz nadrzędnego elementu <Route> w konfiguracji routera. Ścieżka nadrzędna jest prefiksem wszystkich ścieżek podrzędnych.

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

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

Komponent Outlet

<Outlet /> jest miejscem zastępczym w komponencie układu nadrzędnego. React Router zastępuje je elementem dopasowanej trasy podrzędnej.

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

Trasy indeksowe

Trasa z ustawieniem index: true jest renderowana, gdy adres URL nadrzędnej trasy pasuje dokładnie. Pełni funkcję domyślnej trasy podrzędnej, gdy żadna inna ścieżka podrzędna nie pasuje.

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

Wielopoziomowe zagnieżdżanie

Trasy można zagnieżdżać na wielu poziomach. Każdy komponent układu w tym łańcuchu renderuje element <Outlet /> dla swoich tras podrzędnych.

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

Kontekst Outlet

Przekazuj dane z układu do zagnieżdżonych tras podrzędnych za pomocą właściwości context elementu <Outlet />, a następnie odczytuj je w komponentach podrzędnych za pomocą useOutletContext().

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

Nazwane układy z trasami bez ścieżki

Trasa bez właściwości path otacza trasy podrzędne wyłącznie na potrzeby układu, nie dodając segmentu adresu URL. Jest przydatna do grupowania tras we wspólnym układzie.

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

Względne odnośniki w zagnieżdżonych trasach

W zagnieżdżonej trasie element <Link to='sibling'> jest rozwiązywany względem ścieżki bieżącej trasy, podobnie jak względne adresy URL w HTML.

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

useMatch w zagnieżdżonych trasach

useMatch(pattern) zwraca dane dopasowania, gdy bieżący adres URL pasuje do wzorca. Jest przydatny do stylizowania aktywnych odnośników w zagnieżdżonych układach.

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

Granice błędów dla poszczególnych segmentów

Dodaj errorElement do dowolnej zagnieżdżonej trasy, aby przechwytywać błędy tylko w tym segmencie, bez awarii całego szkieletu układu.

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

Praktyczny wzorzec: układ panelu

Typowy panel używa trasy najwyższego poziomu dla szkieletu aplikacji (nagłówka i paska bocznego) oraz zagnieżdżonych tras dla poszczególnych sekcji. Dzięki temu szkielet pozostaje zamontowany, a zmienia się tylko obszar treści.

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

Szybki sprawdzian

Jaki komponent musi renderować układ nadrzędny, aby wyświetlić dopasowaną trasę podrzędną?

Podsumowanie

Zagnieżdżone trasy pozwalają trasom nadrzędnym renderować trwałe układy, a trasom podrzędnym wypełniać element <Outlet />. Używaj tras indeksowych dla domyślnych tras podrzędnych, tras bez ścieżki dla współdzielonych układów oraz useOutletContext do przekazywania danych w dół hierarchii.

Często zadawane pytania

Czy lekcja „Zagnieżdżone trasy i układy Outlet” jest bezpłatna?

Tak — pełny tekst „Zagnieżdżone trasy i układy Outlet” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zagnieżdżone trasy i układy Outlet”?

Budowanie wielopoziomowych układów tras za pomocą zagnieżdżonych i komponentu . Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Zagnieżdżone trasy i układy Outlet”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zagnieżdżone trasy i układy Outlet
  2. Loadery i akcje (Data Router API)
  3. Chronione trasy i strażnicy uwierzytelniania
  4. Zarządzanie stanem w parametrach wyszukiwania URL
← Powrót do React Academy