单击“开始测验”按钮时,我尝试导航到“/quiz”。
然而,当我编译我的代码时,我在网站应用程序上得到以下错误:[Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
我是新的React,如果有人能帮助我,我将不胜感激!
下面是我的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中只有空代码。
5条答案
按热度按时间jhkqcmku1#
首先检查您的react router Dom的版本。这个错误出现时,你有V6的react-router-dom。V6有许多突破性的变化,所以尝试阅读官方文档检查这个:https://reacttraining.com/blog/react-router-v6-pre/现在回答您的问题部分React路由器v6介绍路由
介绍路线
v6中最令人兴奋的变化之一是强大的新元素,这是v5元素的一个相当重要的升级,有一些重要的新特性,包括相对路由和链接,自动路由排名,嵌套路由和布局。
另请查看从v5到v6的迁移指南https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links
icnyk63a2#
只允许
Route
或React.Fragment
作为Routes
组件的子组件,反之亦然。您已经在“/”路径上呈现了Home
组件,因此请删除多余的<Home />
组件。您似乎还在使用react-router-dom
v6,因此Route
组件不再通过render
或component
属性呈现组件,它们现在将组件***呈现为element
属性上的JSX***。到
voase2hg3#
我试试这个语法
有关https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial的更多信息,请参阅文档
hgtggwj04#
将这些添加到index.js文件中
将这些添加到App.js文件中
查看此链接了解更多信息https://www.youtube.com/watch?v=OAjzvS_57z0
aiazj4mn5#
两个选项:
createRoutesWithSuspenseWrappers
)生成每个Route,并 Package 在Suspense中。