ReactJS: [Home] nie je v <Cesta> komponentu. Všetky zložky deti <Trasy> musí byť <Cesta> alebo <Reagovať.Fragment>

0

Otázka

Ja som snaží orientovať na "/kvíz" keď Štart Kvíz tlačidlo klikli.

Avšak, keď som sa zostaviť môj kód som dostať nasledujúce chybové na webovej aplikácií: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Som nový reagovať a ak niekto mi môže pomôcť bol by som vďačný!

Tu je môj kód 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;

Tu je môj kód 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;

Mám iba prázdne kód vnútri Quiz.js v okamihu.

2

Najlepšiu odpoveď

2

najprv skontrolujte verziu reagovať router Dom .Táto chyba sa objaví, keď máte V6 z reagovať-router-dom. V6 majú mnohé prevratné zmeny, takže skúste čítať úradný dokumentácia pozrite sa na to:https://reacttraining.com/blog/react-router-v6-pre/ Teraz pre vašu otázku časť Reagovať router v6 zaviesť Cesty

Predstavujeme Cesty

Jeden z najviac vzrušujúcich zmien v v6 je výkonný nový prvok. To je dosť významné inovácie z v5 je prvok s niektoré dôležité nové funkcie, vrátane relatívna smerovanie a prepojenie, automatické trasy hodnotenie a vnorené trasy a rozloženia.

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

Skontrolujte tiež, či migrácie sprievodca z v5 na v6 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

Ďakujem veľmi pekne za vašu odpoveď funguje to úplne v poriadku!
dojomaker

salem Je normálne, že nie som dostať môj obrázok na pozadí, keď som kliknite na tlačidlo vpravo? Ospravedlňujeme sa, ak je to hlúpa otázka.
dojomaker

môžem odpovedať na to pri pohľade na váš kód .zdieľať ďalšia otázka
salik saleem

to je môj hlavný kód, a mám 2 iné súbory pre hlavičku a pätu, ale nemyslím si, že sú potrebné. Môžete pomôcť na základe týchto súborov alebo potrebujete, aby ste mohli vidieť?
dojomaker
1

Len Route alebo React.Fragment sú povolené pre deti Routes komponent, a naopak. Už ste poskytovania Home komponent na "/" cesta, takže odstránenie nadbytočných <Home /> komponent. Zdá sa, môžete tiež pomocou react-router-dom v6, takže Route komponenty už poskytli komponentov cez render alebo component prop, sa teraz vykreslenie komponenty ako JSX na element prop.

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

na

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

Ďakujem za vašu odpoveď! Ak môžem použiť váš kód zostavuje bez chyby, ale to začína prázdnu stránku. To nechce spustiť môj home.js kód. Máte nejaký nápad, prečo toto by mohol byť prípad? Ak môžete pomôcť, bol by som naozaj šťastný!
dojomaker

@dojomaker Nie ste istí, mohli by tam byť aj niečo iné sa deje vo vašom kód, alebo ste zmeškali vec, ktoré je potrebné opraviť. Táto odpoveď je rovnaká ako neskôr ste prijali, aj keď, tak možno niečo opravil sám lokálne na váš vývojársky server v hodinu medzi odpovede.
Drew Reese

V iných jazykoch

Táto stránka je v iných jazykoch

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