내가 노력하고 탐색"/퀴즈"때 시작하는 퀴즈 버튼을 클릭합니다.
그러나 때 나는 내 코드를 컴파일 나는 다음과 같은 오류 웹사이트에 응용 프로그램: [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 니다.