React: Invariant failed: You should not use <Route> outside a <Router> after installing latest react router dom?

I installed the latest version of react-router-dom which is 6.0.2 then i started getting these error, what could be the problem. This is my App.js where i am implementing the routing functionalities

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
<Router>
      <div className="flex flex-col min-h-screen overflow-hidden">
        <AuthProvider>
          <Navbar />
          <Switch>
            <PrivateRoute component={ProtectedPage} path="/protected" exact />
          </Switch>
        </AuthProvider>
        <Footer />
      </div>
    </Router>

You need to swap your Switch for a Routes and change your component prop for element

import { BrowserRouter as Router, Route, Routes} from "react-router-dom";

<Router>
      <div className="flex flex-col min-h-screen overflow-hidden">
        <AuthProvider>
          <Navbar />
          <Routes>
            <PrivateRoute element={<ProtectedPage />} path="/protected"/>
            <Route element={<ServicesListing />} path="/service-listings" />
          </Routes>
        </AuthProvider>
        <Footer />
      </div>
</Router>
Back to Top