Error: wrap your Route components in a Routes component (change between versions 5 and 6 of react-router-dom)

Question

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:

1. changing the version of react-router-dom to an older one (I do not want to use this method, I would like to solve the problem)
2. as the error message suggests to wrap the 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')

Answer 1

Route syntax has also changed. Now it works like that: <Route path="/dashboard" element={<Dashboard/>} /> . You can view more in documentation

Answer 2

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.