单击“开始测验”按钮时,我试图导航到“/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 router Dom的版本。当你有react-router-dom V6时会出现这个错误。 V6 有很多突破性的改变,所以尝试阅读官方文档
看一下这个:https://reacttraining.com/blog/react-router-v6-pre/现在回答你的问题部分
React router v6 引入路由
航线介绍
v6 中最令人兴奋的变化之一是
强大的新元素。这是一个相当重大的升级
来自 v5 的元素,具有一些重要的新功能,包括
相对路由和链接、自动路由排名和嵌套
路线和布局。
<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/migration-5-to-6.md#relative-routes-and-links
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)