个人中心
gpt4 book ai didi

javascript - 错误 : [undefined] is not a component. 的所有子组件必须是 或

转载 作者：行者123 更新时间：2023-12-02 15:53:03 26 4
gpt4 key购买 nike

<分区>

我正在尝试将 react-router-dom 从 v5 升级到 v6，但我收到此错误消息。

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

任何人都请帮助我解决这个问题。

index.js文件代码

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文件代码

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

26 4 0
文章推荐： javascript - 为什么单击关闭按钮后，可忽略的警报不再显示？
文章推荐： grails - 在CSS中使用GSP表达式
文章推荐： javascript - 如何将获取到的记录一条一条的显示出来
文章推荐： grails - Grails geb从命令行获取参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com