Rendu de composants avec différentes mises en page/éléments à l'aide de React-Router-dom v6 : comment puis-je y parvenir ?

Question

J'ai du mal à écrire du code pour afficher une page de connexion sans barre de navigation ni barre latérale. Je suis tombé sur quelques pages posant des questions similaires, mais aucune ne semble correspondre à ma situation actuelle.

Comment masquer la barre de navigation dans la page de connexion du routeur React Les exemples donnés sont excellents, mais je pense que la manière d'accomplir la même tâche a changé avec réagir-router-dom v6, ce qui m'amène à https://dev.to/iamandrewluca/private-route-in-react- En savoir plus ce changement dans router-v6-lg5

On dirait que je ne comprends pas quelque chose au routage de React Router. Dans le code ci-dessous, j'ai deux itinéraires. Je souhaite afficher l'un des itinéraires (connexion) sans barre de navigation ni composants de barre latérale.

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

Une autre option que j'ai également essayée consistait à déplacer les étiquettes de la barre de navigation et de la barre latérale dans un composant de tableau de bord, mais je dois ensuite faire le même copier-coller avec n'importe quel nouveau composant. Cette approche semble erronée et inefficace, mais si c'est la bonne approche, je ferai le nécessaire

EDIT : Je pense qu'il est important d'inclure que ce qu'il fait actuellement est de charger la page de connexion qui contient la barre de navigation et la barre latérale. Le composant Navigation vers le tableau de bord comporte une barre de navigation et une barre latérale, mais cela est intentionnel. Je veux que la page de connexion n'ait ni barre de navigation ni barre latérale

Answer 1

Le moyen le plus simple de masquer la barre de navigation est d'accéder au composant de la page de connexion et d'appeler useLocation(). Ensuite, après avoir déclaré l'emplacement d'utilisation, vous feriez quelque chose comme ceci. et assignez-le à une position variable { location.pathname === "/login" ?Vide : (

Rendu l'intégralité du composant de la barre de navigation);

Pas si tu peux lire pendant que je tape sur mon téléphone

Answer 2

Si je comprends votre question, vous souhaitez que la navigation et la barre latérale soient rendues sur les itinéraires sans connexion. Pour ce faire, vous pouvez créer un composant de mise en page pour les restituer ainsi que les sorties de l'itinéraire imbriqué.

Utiliser le routage imbriqué

import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // <-- nested routes rendered here
      </div>
    </main>
  </>
);

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

Utilisez la configuration de l'itinéraire et les useRoutes hooks

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

...

import { useRoutes } from 'react-router-dom';

const App = () => {
  const routes = useRoutes(routesConfig);

  return routes;
};

Utiliser la configuration du routage et le routeur de données (Introduit dans la v6.4.0)

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

...

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

const router = createBrowserRouter(routesConfig);

const App = () => {
  return <RouterProvider router={router} />;
};