Quiero poner un div dentro de <Routes> y también renderizar un <Topbar /> y <Sidebar /> dentro de <Routes> sin la etiqueta <Route> para ellos.
Mi código es el siguiente: -
const App = () => { return ( <Router> <Routes> <Route path="login" element={<Login />} /> <Topbar /> <div className="container"> <Sidebar /> <Route path="/" element={<Home />} /> <Route path="users" element={<UserList />} /> </div> </Routes> </Router> ); }; Quiero implementar <Topbar /> y <Sidebar /> para todas las rutas. Pero para una excepción de la página de inicio de sesión (la barra Topbar y la Sidebar no deben mostrarse en la página de inicio de sesión). Es por eso que puse la ruta de inicio de sesión en la parte superior de Topbar superior y la Sidebar .
La consola muestra un error como:
Error no detectado: [Topbar] no es un componente
<Route>. Todos los componentes secundarios de<Routes>deben ser<Route>o<React.Fragment>
¿Cómo implementar esta funcionalidad?
Cambie sus rutas como a continuación,
debe verificar si el usuario inició sesión o no, si el usuario inició sesión use Tobbar, Sidebar, etc., de lo contrario, simplemente devuelva la ruta de inicio de sesión
const App = () => { const [isLogin, setIsLogin] = useState(false) return ( <Router> <Routes> { isLogin ? <Topbar /> <div className="container"> <Sidebar /> <Route path="/" element={<Home />} /> <Route path="users" element={<UserList />} /> </div> : <Route path="login" element={<Login />} /> </Routes> </Router> ); };En react-router-dom v6, solo los componentes Route y React.Fragment son elementos secundarios válidos para el componente Routes .
Utilice componentes de diseño para representar los componentes de la Sidebar Topbar y la barra lateral junto con una Outlet para rutas anidadas para las rutas en las que desea representar estos componentes.
Ejemplo:
import { Routes, Route, Outlet } from 'react-router-dom'; const Layout = () => ( <> <Topbar /> <div className="container"> <Sidebar /> <Outlet /> </div> </> ); const App = () => { return ( <Router> <Routes> <Route path="/login" element={<Login />} /> <Route element={<Layout />}> <Route path="/" element={<Home />} /> <Route path="users" element={<UserList />} /> </Route> </Routes> </Router> ); };