Cómo ir de ruta específica sin la representación de algunos de los componentes en Reaccionar?

Question 1

Estoy usando react-router-dom v6. Quiero que mi Login página para ser prestados sin la Sidebar y Topbar componentes. Cómo hacerlo?

function App() {
  return (
    <Router>
      <Container>
        <Sidebar />
        <Content>
          <Topbar />
          <MainContent>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/users" element={<UserList />} />
              <Route path="/users/:id" element={<User />} />
              <Route path="/newUser" element={<NewUser />} />
              <Route path="/products" element={<ProductList />} />
              <Route path="/products/:id" element={<Product />} />
              <Route path="/newProduct" element={<NewProduct />} />
              <Route path="/login" element={<Login />} />
            </Routes>
          </MainContent>
        </Content>
      </Container>
    </Router>
  );
}

No quiero que mi página de inicio de sesión para representar dentro de la MainContent pero teniendo toda la página sin Sidebar y Topbar.

Traté de mover el Routes superior y la parte del login route por encima de la barra lateral, pero hay un error Error: [Sidebar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Question 2

Desde SideBar y TopBar parecen ser parte de un "diseño", y desea una "plantilla" diferente específicamente para el "/login", entonces le sugiero que abstrae el contenedor de componentes en el diseño de componentes. Cada contenedor de diseño debe representar un Outlet para sus respectivas rutas anidadas.

const AppLayout = () => (
  <Container>
    <Sidebar />
    <Content>
      <Topbar />
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

const LoginLayout = () => (
  <Container>
    <Content>
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<AppLayout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<UserList />} />
          <Route path="users/:id" element={<User />} />
          <Route path="newUser" element={<NewUser />} />
          <Route path="products" element={<ProductList />} />
          <Route path="products/:id" element={<Product />} />
          <Route path="newProduct" element={<NewProduct />} />
        </Route>
        <Route path="/login" element={<LoginLayout />}>
          <Route index element={<Login />} />
        </Route>
      </Routes>
    </Router>
  );
}

Drew Reese · Answer 1 · 2021-11-24T01:47:40

Desde SideBar y TopBar parecen ser parte de un "diseño", y desea una "plantilla" diferente específicamente para el "/login", entonces le sugiero que abstrae el contenedor de componentes en el diseño de componentes. Cada contenedor de diseño debe representar un Outlet para sus respectivas rutas anidadas.

const AppLayout = () => (
  <Container>
    <Sidebar />
    <Content>
      <Topbar />
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

const LoginLayout = () => (
  <Container>
    <Content>
      <MainContent>
        <Outlet />
      </MainContent>
    </Content>
  </Container>
);

...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<AppLayout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<UserList />} />
          <Route path="users/:id" element={<User />} />
          <Route path="newUser" element={<NewUser />} />
          <Route path="products" element={<ProductList />} />
          <Route path="products/:id" element={<Product />} />
          <Route path="newProduct" element={<NewProduct />} />
        </Route>
        <Route path="/login" element={<LoginLayout />}>
          <Route index element={<Login />} />
        </Route>
      </Routes>
    </Router>
  );
}

Cómo ir de ruta específica sin la representación de algunos de los componentes en Reaccionar?

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría