Wie kann ich React-Komponenten mit benutzerdefinierten Layouts mit React Router v6 rendern?

Rendern von Komponenten mit benutzerdefinierten Layouts mit React Router v6

In React sind die Mit der Komponente können Sie Routen für Ihre Anwendung definieren und die Komponenten angeben, die basierend auf der aktuellen URL gerendert werden sollen. Wenn Sie mit verschiedenen Seitentypen arbeiten, beispielsweise einer Anmeldeseite, die ein benutzerdefiniertes Layout ohne Navigationselemente erfordert, müssen Sie verstehen, wie Sie das Layout Ihrer Komponenten steuern können.

React Router v6 führt ein Konzept namens „ verschachtelte Routen.“ Auf diese Weise können Sie eine Layoutkomponente erstellen, die als übergeordnete Komponente für andere Routen verwendet wird. In dieser Layout-Komponente können Sie gemeinsame Elemente wie Navbar und Sidebar einbinden.

Um dies zu implementieren, können Sie eine AppLayout-Komponente erstellen, die die Navbar und Sidebar enthält. Binden Sie dann in Ihrer App-Komponente alle Routen außer der Anmeldeseite in das AppLayout ein.

// AppLayout.js
import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles['main--container']}>
      <div className={styles['main--content']}>
        <Outlet />
      </div>
    </main>
  </>
);

// App.js
import { Routes, Route } from 'react-router-dom';
import { AppLayout } from './AppLayout';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';

const App = () => {
  return (
    <>
      <Routes>
        <Route path='/login' element={<LoginPage />} />
        <Route element={<AppLayout />}>
          <Route path='/' element={<Dashboard />} />
        </Route>
      </Routes>
    </>
  );
};

Alternativ können Sie den useRoutes-Hook oder den verwenden. Komponente mit Datenroutern (eingeführt in Version 6.4.0), um das gleiche Ergebnis zu erzielen. Die konkrete Methode, die Sie wählen, hängt von Ihren Vorlieben und Anwendungsanforderungen ab.

Das obige ist der detaillierte Inhalt vonWie kann ich React-Komponenten mit benutzerdefinierten Layouts mit React Router v6 rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!