ReactJS: [Home] nu este o <Rută> componenta. Toate componentă copii de <Rute> trebuie să fie un <Rută> sau <Reacționa.Fragment>

0

Problema

Am încercat să navigați la "/test", atunci când Începe Test butonul este apasat.

Cu toate acestea, atunci când am compila codul meu primesc următoarea eroare pe site-ul de aplicare: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Sunt nou să reacționeze și dacă cineva mă poate ajuta as fi recunoscator!

Aici este codul meu pentru 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;

Aici este codul meu pentru 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;

Am doar gol interior cod Quiz.js în momentul de față.

2

Cel mai bun răspuns

2

în primul rând verificați versiunea de reacționeze router Dom .Această eroare apare atunci când aveți V6 de a reacționa-router-dom. V6 au multe de schimbare revolutionara deci, încercați să citiți documentația oficială check this out:https://reacttraining.com/blog/react-router-v6-pre/ Acum, întrebarea ta parte Reacționează router v6 introduce Rute

Introducerea De Rute

Una dintre cele mai interesante schimbări în v6 este puternic element nou. Acest lucru este destul de un upgrade semnificativ de la v5 element cu importante caracteristici noi, inclusiv relativă dirijarea și legarea automată traseu clasament, și imbricate rute și machete.

  <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>

Verifica, de asemenea, ghid de migrare de la v6 v5 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

Vă mulțumesc foarte mult pentru răspunsul dumneavoastră funcționează foarte bine!
dojomaker

salem Este normal că nu am să-mi imagine de fundal atunci când am faceți clic pe butonul dreapta? Scuze daca este o intrebare stupida.
dojomaker

nu pot răspunde la această uitandu-te la cod .împărtășesc o altă întrebare
salik saleem

aceasta este principala mea cod, si am 2 alte fișiere pentru antet și subsol, dar nu cred că ele sunt necesare. Poate te ajuta bazat pe aceste fișiere sau aveți nevoie pentru a le vedea?
dojomaker
1

Numai Route sau React.Fragment au voie să fie copii de Routes componentă, și vice-versa. Esti deja o randare Home componenta pe "/" calea, așa că scoateți străine <Home /> componenta. Se pare că sunt, de asemenea, folosind react-router-dom v6, deci Route componentele nu se mai face prin intermediul unei componente render sau component propunerii, se face acum componente ca JSX pe element prop.

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

pentru a

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

Vă mulțumim pentru răspunsul dumneavoastră! Dacă am folosi codul se compileaza fara erori dar se lansează o pagină goală. Nu-mi lansa home.js cod. Ai idee de ce acest lucru ar putea fi cazul? Dacă puteți ajuta, aș fi foarte fericit!
dojomaker

@dojomaker Nu sunt sigur, nu ar putea fi altceva se întâmplă în codul dvs., sau ai pierdut un lucru care trebuia să fie corectate. Acest răspuns este la fel ca cel mai târziu ai acceptat, deși, așa că poate ceva de corectat de la sine local pe server de dezvoltare în oră între răspunsuri.
Drew Reese

În alte limbi

Această pagină este în alte limbi

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