ReactJS:[Home]아닌<루>구성 요소입니다. 모든 구성 요소의 아이들을<노선>어야 합<날고있다>또는<반응합니다.단편>

0

질문

내가 노력하고 탐색"/퀴즈"때 시작하는 퀴즈 버튼을 클릭합니다.

그러나 때 나는 내 코드를 컴파일 나는 다음과 같은 오류 웹사이트에 응용 프로그램: [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 니다.

2

최고의 응답

2

첫째 모든 프로그램의 버전을 확인 반응 라우터 Dom.이러할 때 나타나는 V6 의 반응 라우터 dom. V6 많은 획기적인 변화를 읽으려고 공식 문서 이 체크아웃:https://reacttraining.com/blog/react-router-v6-pre/ 지금 당신의 질문에 대한 부 반응 라우터 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>

또한 체크인 마이그레이션 가이드 v5v6 https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

2021-11-23 04:01:13

당신은 당신의 응답을 완벽하게 작동합니다!
dojomaker

살렘 그것은 정상적인 나는 못하고 나의 배경 이미지 클릭하면서 버튼을 오른쪽? 죄송하는 경우 그것은 바보 같은 질문입니다.
dojomaker

답변 드리겠습니다 이 보고에서 당신의 코드입니다.공유는 다른 질문
salik saleem

이것이 나의 기본 코드,그리고 나는 2 개의 다른 파일을 헤더 및 글 그러나 나는 생각하지 않은 그들이 필요합니다. 를 도울 수 있는 이를 기반으로 파일 또는 필요하신 그들을 볼?
dojomaker
1

RouteReact.Fragment 할 수 있는 어린이들의 Routes 구성 요소,그 반대의 경우도 마찬가지입니다. 당신은 이미 렌더링하기 Home 구성 요소는"/"경로,그래서 불필요 한 제거 <Home /> 구성 요소입니다. 그것은 나타나 당신은 또한 사용 react-router-dom v6,그래서 Route 구성 요소를 더 이상 구성 요소를 렌더링해 rendercomponent 소품,그들은 지금은 구성 요소를 렌더링 으로 JSXelement 소품입니다.

<Routes>
  <Route exact path="/" component={Home} />
  <Route path="/quiz" component={Quiz} />
  <Home /> // <-- remove this
</Routes>

하기

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/quiz" element={<Quiz />} />
</Routes>
2021-11-23 03:20:06

귀하의 답변 주셔서 감사합니다! 면 내가 사용하는 코드를 컴파일하지 않고 오지만 시작 빈 페이지입니다. 그것을 실행하지 않습니다 나 home.js 코드입니다. 당신은 어떤 생각이 왜 이런 일이 발생하고 있을까요? 당신이 도움이 될 수 있다면 나는 것이 정말로 행복합니다!
dojomaker

@dojomaker 지 확인할 수 있습 뭔가 다른 코드에서는,또는 당신을 놓친 것은 필요하게 확인할 수 있게 되었습니다. 이 답변은 같은 나중에 하나를 당신은 허용되지만,그래서 어쩌면 무언가를 수정에서 로컬로 자체 개발 서버에서 시간 사이의 답변이 있습니다.
Drew Reese

다른 언어로

이 페이지는 다른 언어로되어 있습니다

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................