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

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