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. After I run this code show this error..

   index.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. I think React version 5 haven't this problem in code. with Switch.....

3. I need help for how to implement div in react version 6....with Routes ?

4. And I need to help fix Topbar and sidebar problem