Estoy usando react-router-dom v6. Quiero que mi página de inicio de Login se muestre sin los componentes Sidebar y Topbar . ¿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 se muestre dentro de MainContent sino que tome toda la página sin Sidebar y Topbar .
Intenté mover las Routes hacia arriba y tengo la route de inicio de sesión sobre 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>
Dado que SideBar y TopBar parecen ser parte de un "diseño", y desea un "diseño" diferente específicamente para "/ iniciar sesión", sugiero abstraer los componentes del contenedor en componentes de diseño. Cada contenedor de diseño debe generar 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> ); }function App() { return ( <Router> <Container> { Login || <Sidebar /> } <Content> { Login || <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> ); }prueba el renderizado condicional. ¡Esto funciona para mi!