Skip to content
Advertisement

Uncaught Error: [Topbar] is not a component. All component children of must be a or

I have looked at the previous questions and googled for the answer and I think I almost know what the issue in here is, but don’t know how to solve it.

return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        {admin && (
          <>
            <Topbar />
            <div className="container">
              <Sidebar />
              <Route path="/" element={<Home />} />
              <Route path="/users" element={<UserList />} />
              <Route path="/user/:userId" element={<User />} />
              <Route path="/newUser" element={<NewUser />} />
              <Route path="/products" element={<ProductList />} />
              <Route path="/product/:productId" element={<Product />} />
              <Route path="/newproduct" element={<NewProduct />} />
            </div>
          </>
        )}
      </Routes>
    </Router>

Please tell me how to setup the topar and slidebar components here. Requesting my fellow coders to look at this one and thanks in advance.

Advertisement

Answer

The error is clear, you only can use the <Route /> tag, and remove the <div className="container"> also. Try this:

    return (
        <>
          <Topbar />
          <Sidebar />
          <Router>
            <Routes>
              <Route path="/login" element={<Login />} />
              {admin && (
                  <>  
                    <Route path="/" element={<Home />} />
                    <Route path="/users" element={<UserList />} />
                    <Route path="/user/:userId" element={<User />} />
                    <Route path="/newUser" element={<NewUser />} />
                    <Route path="/products" element={<ProductList />} />
                    <Route path="/product/:productId" element={<Product />} />
                    <Route path="/newproduct" element={<NewProduct />} />
                  </>
              )}
            </Routes>
          </Router>
        </>
)

Or you can import your TOPBAR and SIDEBAR components inside every other component.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement