gpt4 book ai didi

javascript - ReactJS:[Home] 不是 组件。 的所有子组件必须是

转载 作者:行者123 更新时间:2023-12-05 00:25:15 28 4
gpt4 key购买 nike

单击“开始测验”按钮时,我试图导航到“/quiz”。
但是,当我编译我的代码时,我在网站应用程序上收到以下错误:[Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>我是新手,如果有人可以帮助我,我将不胜感激!
这是我的 App.js 代码:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import Home from "./Pages/Home/Home";
import Quiz from "./Pages/Quiz/Quiz";
import "./App.css";
function App() {
return (
<BrowserRouter>
<div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
<Header />
<Routes>
<Route exact path="/" component={Home} />
<Route path="/quiz" component={Quiz} />
<Home />
</Routes>
</div>
<Footer />
</BrowserRouter>
);
}

export default App;

这是我的 Home.js 代码:
import { Button } from "@material-ui/core";
import { Container } from "@material-ui/core";
import { useNavigate } from "react-router-dom";
import "./Home.css";

const Home = () => {
const navigate = useNavigate();

const sendSubmit = () => {
navigate("/quiz");
};
return (
<Container className="content">
<h1 id="quiz-title">Phishing Quiz</h1>
<h2 class="question-text">
Do you think you can beat our phishing quiz?
</h2>
<p className="description">
{" "}
There are many social engineering attacks on internet however not all of
them are good enough to trick users. However there are some scams that
are identical to original websites and usually most of the users get
tricked by them.
</p>
<p className="description">
Do you think you are smart enough to handle these attacks?
</p>
<p className="description">
We are challenging you with our phishing quiz which will show you
examples of really good social engineering attacks on internet. We hope
you can pass!
</p>
<p>""</p>
<Button
variant="contained"
color="primary"
size="large"
onClick={sendSubmit}
>
Start Quiz
</Button>
</Container>
);
};

export default Home;

目前我在 Quiz.js 中只有空代码。

最佳答案

首先检查您的 react 路由器 Dom 的版本。当您拥有 V6 的 react-router-dom 时会出现此错误。 V6 有许多突破性的变化,所以请尝试阅读官方文档
看看这个:https://reacttraining.com/blog/react-router-v6-pre/
现在你的问题部分
React 路由器 v6 引入 Routes
路线介绍

One of the most exciting changes in v6 is thepowerful new element. This is a pretty significant upgradefrom v5's element with some important new features includingrelative routing and linking, automatic route ranking, and nestedroutes and layouts.

  <BrowserRouter>
<div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
<Header />
<Routes>
<Route exact path="/" element={<Home/>} />
<Route path="/quiz" element={<Quiz/>} />

</Routes>
</div>
<Footer />
</BrowserRouter>
另请查看从 v5 到 v6 的迁移指南
https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

关于javascript - ReactJS:[Home] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70074873/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com