Bug Fix : React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead

This warning occurs when there is a div present inside the Switch tag of react router. Move the div outside the switch tag and this warning is gone. But current scenario also requires Sidebar tag to be moved up from Switch tag as this allows right route to get rendered. Earlier only sidebar was rendering.

app.js
<Router>
      <Route path="/login">
        <Login />
      </Route>
      {admin && (
        <>
          <Topbar />
          <div className="container">
            <Sidebar />
            <Switch>
              <Route path="/users">
                <UserList />
              </Route>
              <Route path="/user/:userId">
                <User />
              </Route>
              <Route path="/newUser">
                <NewUser />
              </Route>
              <Route path="/products">
                <ProductList />
              </Route>
              <Route path="/product/:productsId">
                <Product />
              </Route>
              <Route path="/newProduct">
                <NewProduct />
              </Route>
              <Route exact path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </>
      )}
    </Router>

=> Few takeways: 1.Do not put div tag inside switch 2.Switch tag should contain only Route tags. Route tags can be placed outside Switch but all child component of Switch should be Route tags. 3.Any non-route component like Header , Sidebar and Footer should be placed outside switch. These will get rendered irrespective of the route, so better not to put them inside Switch.

UttamMarandi / AdminPanel-FoodHub

Bug Fix : React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead #3