个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
<分区>
我正在尝试将 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
0
我是一名优秀的程序员,十分优秀！