import React, { useContext } from 'react'; import Sidebar from "./components/sidebar/Sidebar"; import Topbar from "./components/topbar/Topbar"; import "./app.css"; import Home from "./pages/home/Home"; import { BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom"; import UserList from "./pages/userList/UserList"; import User from "./pages/user/User"; import NewUser from "./pages/newUser/NewUser"; import ProductList from "./pages/productList/ProductList"; import Product from "./pages/product/Product"; import NewProduct from "./pages/newProduct/NewProduct"; import Login from './pages/login/Login'; import { AuthContext } from './context/authContext/AuthContext'; function App() { const { user } = useContext(AuthContext); return ( <Router> <Routes> <Route path="/login" element={user ? <Navigate to='/' />: <Login />} /> {user && ( <> <Topbar/> <div className="container"> <Sidebar /> <Route exact path="/" element={<Home />} /> <Route path="/users" element={<UserList />} /> <Route path="/user/:userId" element={<User />} /> <Route path="/newUser" element={<NewUser />} /> <Route path="/movies" element={<ProductList />} /> <Route path="/product/:productId" element={<Product />} /> <Route path="/newproduct" element={<NewProduct />} /> </div> </> )} </Routes> </Router> ); } export default App;

1. Después de ejecutar este código, aparece este error.

   índice.tsx:19

    Uncaught Error: [Topbar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> at invariant (index.tsx:19) at index.tsx:776 at react.development.js:1104 at react.development.js:1067 at mapIntoArray (react.development.js:964) at mapIntoArray (react.development.js:1004) at mapChildren (react.development.js:1066) at Object.forEachChildren [as forEach] (react.development.js:1103) at createRoutesFromChildren (index.tsx:760) at index.tsx:769

2. Creo que la versión 5 de React no tiene este problema en el código. con interruptor.....

3. Necesito ayuda sobre cómo implementar div en la versión 6 de reacción... ¿con rutas?

4. Y necesito ayudar a solucionar el problema de la barra superior y la barra lateral