¿Cómo renderizo componentes con diferentes diseños/elementos usando reaccionar-router-dom v6?

Resuelto RockoDaBoat asked hace 3 años • 2 respuestas

Tengo problemas para escribir código para representar una página de inicio de sesión sin barra de navegación ni barra lateral. Me he encontrado con algunas páginas que hacen preguntas similares pero ninguna parece pertenecer a mi situación actual.

Cómo ocultar la barra de navegación en la página de inicio de sesión en el enrutador de reacción. El ejemplo dado es excelente, pero creo que la forma de realizar la misma tarea ha cambiado con reaccionar-router-dom v6, lo que me llevó a leer sobre este cambio en https://dev.to/. iamandrewluca/ruta-privada-en-router-react-v6-lg5

Parece que no entiendo cierto aspecto sobre el enrutamiento con React Router. En el siguiente código tengo dos rutas. Una de las rutas (Iniciar sesión) que me gustaría renderizar sin el componente NavBar y SideBar.

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

Una alternativa, que también probé, sería mover las etiquetas NavBar y SideBar al componente Panel, pero luego esencialmente tendría que hacer lo mismo copiar y pegar para cualquier componente nuevo. Este método me pareció incorrecto e ineficiente, pero si esta es la forma correcta de hacerlo, haré lo necesario.

Editar: creo que es importante incluir lo que hace actualmente es cargar la página de inicio de sesión con la barra de navegación y la barra lateral incluidas. Navegar al componente del tablero tiene la barra de navegación y la barra lateral, pero esto es lo previsto. Lo que me gustaría es que la página de inicio de sesión no tenga la barra de navegación ni la barra lateral.

RockoDaBoat avatar Nov 17 '21 12:11 RockoDaBoat
Aceptado

Si entiendo su pregunta, desea representar la navegación y la barra lateral en la ruta sin inicio de sesión. Para ello, puede crear un componente de diseño que las represente y una salida para las rutas anidadas.

Usando rutas anidadas

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

Usando una configuración de rutas y useRoutesun gancho

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

Usando una configuración de rutas y enrutadores de datos ( introducido en 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} />;
};
Drew Reese avatar Nov 17 '2021 05:11 Drew Reese