ReactJS: [Home] nie jest składnikiem <Ścieżka>. Wszystkie komponenty potomne <Tras> musi być <Trasami><Trasy> lub <Trasą>Fragment>

0

Pytanie

Próbuję przejść do "/quiz", gdy wciśnięty jest przycisk "Rozpocznij quiz".

Jednak, kiedy компилирую swój kod, otrzymuję następujący błąd w aplikacji internetowej: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Jestem nowy w reakcji, i jeśli ktoś może mi pomóc, byłbym wdzięczny!

Oto mój kod 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;

Oto mój kod 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;

U mnie w środku jest tylko pusty kod Quiz.js w tej chwili.

2

Najlepsza odpowiedź

2

przede wszystkim, sprawdź wersję routera react Dom .Ten błąd pojawia się, gdy masz V6 react-router-dom. W V6 jest wiele nowatorskich zmian, więc spróbuj przeczytać oficjalną dokumentację sprawdź to:https://reacttraining.com/блог/react-маршрутизатор-v6-pre/ Teraz przejdźmy do części pytania Router React v6 wprowadza trasy

Zapoznanie się z Trasami

Jednym z najbardziej ekscytujących zmian w v6 jest nowy mocny element. Jest to dość znaczące uaktualnienie w porównaniu z elementem v5 z niektórych ważnych nowych funkcji, w tym względną routing i przyciąganie, automatyczne ranking tras, a także zagnieżdżone trasy i układy.

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

Zapoznaj się także z instrukcją migracji 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

Dziękuję bardzo za odpowiedź, działa świetnie!
dojomaker

salem, To normalne, że nie otrzymuję obraz tła, gdy klikam na przycisk po prawej stronie? Przepraszam, jeśli to głupie pytanie.
dojomaker

ja mogę odpowiedzieć na to pytanie, patrząc na twój kod .podziel się jeszcze jednym pytaniem
salik saleem

to jest mój podstawowy kod, i mam jeszcze 2 pliki do nagłówka i stopki, ale nie sądzę, że są one potrzebne. Czy możesz pomóc na podstawie tych plików lub trzeba je zobaczyć?
dojomaker
1

Tylko Route lub React.Fragment dozwolone dzieci Routes składnik, i odwrotnie. Można już wykonać Home składnik na drodze"/", więc usuń obce <Home /> składnik. Wygląda na to, korzystasz react-router-dom v6, więc Route składniki już się nie wyświetlają elementy za pomocą render lub component zawieszenie, teraz wyświetla elementy w postaci JSX na element brzeg.

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

Dla

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

Dziękuję ci za odpowiedź! Jeśli używam twój kod jest skompilowany bez błędów, ale uruchamia pustą stronę. To nie uruchamia mój home.js kod. Masz jakieś pomysły, dlaczego tak jest? Jeśli możesz pomóc, byłbym naprawdę szczęśliwy!
dojomaker

@dojomaker Nie jestem pewien, że w kodzie może być coś jeszcze, lub przegapiłeś coś, co trzeba było naprawić. Ta odpowiedź jest taka sama, jak i późniejszym, który można wziąć, chociaż, być może, coś poprawiono lokalnie na serwerze rozwoju w ciągu godziny między odpowiedziami.
Drew Reese

W innych językach

Ta strona jest w innych językach

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