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>