I'm doing a course where version 5 of react-router-dom is used where there have been some pretty significant changes to react-router-dom.
When, launch the application, a white page appears in the browser, using devtools I get an error message: Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your Route in a Routes.
Before I decided to write this post, I looked through various forums on how to solve this error, the two main solutions are as follows:
react-router-dom to an older one (I do not want to use this method, I would like to solve the problem)Route in Routes. This is what I did. But it didn't work.App.js
import "./App.css";
import Dashboard from "./components/Dashboard";
import Header from "./components/Layout/Header";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Routes, Router, Route } from "react-router-dom";
import AddProject from "./components/Project/AddProject";
import { Component } from "react";
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Header />
<Routes>
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/addProject" component={AddProject} />
</Routes>
</div>
</Router>
);
}
}
export default App;
I changed the import I added Routes to it. I wrapped the Route in Routes. But it keeps getting the same error.
I don't know if I should remove the Router, but if I do it receives the error: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
Route syntax has also changed. Now it works like that: <Route path="/dashboard" element={<Dashboard/>} /> . You can view more in documentation
You are importing the BrowserRouter as Routes, and then importing the low-level Router. You are still missing the real Routes component wrapping the routes.
Fix the imports and then fix the route API/syntax.
Example:
import {
BrowserRouter as Router, // <-- this is the router
Routes, // <-- this is the Routes
Route
} from "react-router-dom";
import AddProject from "./components/Project/AddProject";
import { Component } from "react";
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Header />
<Routes>
<Route
path="/dashboard"
element={<Dashboard />} // <-- element prop takes ReactNode/JSX
/>
<Route
path="/addProject"
element={<AddProject />} // <-- element prop takes ReactNode/JSX
/>
</Routes>
</div>
</Router>
);
}
}
You can also review the Upgrading from v5 migration/upgrade guide for the other breaking changes from RRDv5 to RRDv6.