React: Invariant failed: Вы не должны использовать <Route> вне <Router> после установки последней версии react router dom?

Я установил последнюю версию react-router-dom, а именно 6.0.2, после чего я начал получать эти ошибки, в чем может быть проблема. Это мой App.js, в котором я реализую функциональность маршрутизации

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>

Вам нужно поменять Switch на Routes и поменять component опору на 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>
Вернуться на верх