ReactJS: [Home] non è un <Percorso> componente. Tutti i componenti che sono figli di <Rotte> deve essere un <Percorso> o <Reagire.Frammento>

0

Domanda

Sto cercando di passare a "/quiz" quando Iniziare Quiz pulsante viene cliccato.

Tuttavia, quando compilo il mio codice ottengo il seguente messaggio di errore sul sito web application: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Sono nuovo di reagire e se qualcuno mi può aiutare sarei grato!

Ecco il mio codice per 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;

Ecco il mio codice per 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;

Ho solo il vuoto codice all'interno Quiz.js al momento.

2

Migliore risposta

2

prima di tutto controllare la versione di reagire router Dom .Questo errore viene visualizzato quando si hanno V6 di reagire-router-dom. V6 sono molte cambiamento innovativo in modo da provare a leggere la documentazione ufficiale di check this out:https://reacttraining.com/blog/react-router-v6-pre/ Ora per la tua domanda parte Reagire router v6 introdurre Percorsi

L'Introduzione Di Percorsi

Uno dei cambiamenti più interessanti in v6 è il nuovo elemento potente. Questo è abbastanza significativo aggiornamento da v5 elemento con alcune importanti novità, tra cui relativo routing e il collegamento automatico dell'itinerario classifica, e nidificate percorsi e layout.

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

Controllare anche la guida alla migrazione da v5 a 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

Grazie mille per la tua risposta funziona perfettamente!
dojomaker

salem È normale che non ricevo la mia immagine di sfondo quando clicco sul pulsante a destra? Scusate se è una domanda stupida.
dojomaker

posso rispondere a questa guardando il tuo codice .condividere un'altra domanda
salik saleem

questo è il mio codice principale, e ho altri 2 file di intestazione e piè di pagina, ma non penso che siano necessari. Potete aiutarmi a base di questi file o avete bisogno di vedere?
dojomaker
1

Solo Route o React.Fragment sono ammessi i bambini di Routes componente e vice-versa. Si sono già rendering di un Home componente "/" il percorso, in modo da rimuovere l'estranei <Home /> componente. Sembra si utilizza anche react-router-dom v6, in modo che il Route componenti non più di rendering dei componenti attraverso un render o component prop, ora il rendering di componenti come JSX sul element prop.

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

per

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

Grazie per la tua risposta! Se uso il tuo codice viene compilato senza errori, ma lancia una pagina vuota. Non lanciare il mio home.js codice. Avete qualche idea del perché questo potrebbe essere il caso? Se si può aiutare le sarei davvero felice!
dojomaker

@dojomaker Non è sicuro, ci potrebbe essere qualcos'altro nel codice, o ti sei perso una cosa che doveva essere corretto. Questa risposta è la stessa, come più tardi si è accettato, però, quindi forse qualcosa di corretto automaticamente in locale sul server di sviluppo nell'ora tra le risposte.
Drew Reese

In altre lingue

Questa pagina è in altre lingue

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