Comment puis-je restituer des composants React avec des mises en page personnalisées à l'aide de React Router v6 ?

Rendu de composants avec des mises en page personnalisées à l'aide de React Router v6

Dans React, l'attribut Le composant vous permet de définir des itinéraires pour votre application et de spécifier les composants qui doivent être rendus en fonction de l'URL actuelle. Lorsque vous travaillez avec différents types de pages, comme une page de connexion qui nécessite une mise en page personnalisée sans éléments de navigation, il devient nécessaire de comprendre comment contrôler la mise en page de vos composants.

React Router v6 introduit un concept appelé " itinéraires imbriqués." Cela vous permet de créer un composant de mise en page qui sera utilisé comme parent d'autres itinéraires. Dans ce composant de mise en page, vous pouvez inclure des éléments partagés tels que Navbar et Sidebar.

Pour implémenter cela, vous pouvez créer un composant AppLayout qui inclut Navbar et Sidebar. Ensuite, dans votre composant App, encapsulez toutes les routes à l'exception de la page de connexion dans AppLayout.

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

Vous pouvez également utiliser le hook useRoutes ou le composant avec des routeurs de données (introduits dans la v6.4.0) pour obtenir le même résultat. La méthode spécifique que vous choisirez dépendra de vos préférences et des exigences de votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!