Error: [undefined] is not a <Route> component. All component children of <Routes> must b-CodePudding

I'm trying to upgrade the react-router-dom from v5 to v6 but I am getting this error message.

Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Anyone please help me with this issue.

index.js file code

import React from "react"
import ReactDOM from "react-dom"
import "./assets/main.css"
import App from "./App"
import { BrowserRouter } from "react-router-dom"
import { AuthContextProvider } from "./context/AuthContext"

ReactDOM.render(
  <React.StrictMode>
    <AuthContextProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AuthContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
)

App.js file code

import React, { Suspense } from "react"
import { Routes, Route } from "react-router-dom"
import "./App.css"
import { Helmet } from "react-helmet"

// custom components
import SideBar from "./components/layouts/SideBar"
import Navbar from "./components/layouts/Navbar"
import Footer from "./components/layouts/Footer"
import Feedback from "./components/feedback/Feedback"
import useGaTracker from "./hooks/useGaTracker"
import LottieAnimation from "./components/smallComponents/LottieAnimation"

// loader
import rocketLoader from "./assets/animated_illustrations/loader.json"

// lazy loading components
const Dashboard = React.lazy(() => import("./components/dashboard/Dashboard"))
const ChallengesList = React.lazy(() => import("./components/challenges/ChallengesList"))
const ChallengeDetails = React.lazy(() =>
  import("./components/challenges/ChallengeDetails")
)
const Resources = React.lazy(() => import("./components/resources/Resources"))
const Roadmaps = React.lazy(() => import("./components/roadmaps/Roadmaps"))
const SolutionList = React.lazy(() => import("./components/solutions/SolutionList"))
const MySolutions = React.lazy(() => import("./components/MySolutions/MySolutions"))

const App = () => {
  useGaTracker()
  return (
    <>
      <Helmet>
        <title>CODINGSPACE - Learn by Building Web and Mobile Apps</title>
      </Helmet>
      <div className="relative grid min-h-screen md:grid-cols-layout-tablet xl:grid-cols-layout-desktop grid-rows-layout-desktop md:gap-6">
        <Navbar />
        <SideBar />
        <Suspense
          fallback={
            <div className="sm:ml-0 pr-5 py-52 row-start-2 row-end-3 col-start-1 md:col-start-2 col-end-3 place-self-center">
              <LottieAnimation
                animationDataFile={rocketLoader}
                height={100}
                width={100}
              />
            </div>
          }
        >
          <Routes>
            <Route exact path="/">
              <Dashboard />
            </Route>
            <Route path="/challenges">
              <ChallengesList />
            </Route>
            <Route path="/challenge/:id">
              <ChallengeDetails />
            </Route>
            <Route path="/resources">
              <Resources />
            </Route>
            <Route path="/roadmaps">
              <Roadmaps />
            </Route>
            <Route path="/solutions">
              <SolutionList />
            </Route>
            <Route path="/mysolutions">
              <MySolutions />
            </Route>
          </Routes>
        </Suspense>
        <Feedback />
        <Footer />
      </div>
    </>
  )
}

export default App

CodePudding user response：

You should pass the component as "element", like:

<Route path="/" element={<Dashboard/>}>

Or for protected routes:

<Route
 path="home"
 element={
   <ProtectedRoute user={user}>
   <Home />
   </ProtectedRoute>
      }
    />
    ...
  </Routes>