web-dev-qa-db-fra.com

ReactJS: [home] n'est pas un composant <itinéraire>. Tous les composants enfants des <itinéraires> doivent être un <itinéraire> ou <réact.fragment>

J'essaie de naviguer vers "/ quiz" lorsque le bouton Démarrer Quiz est cliqué.

Cependant, lorsque je compile mon code, je reçois l'erreur suivante sur l'application du site Web: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Je suis nouveau à réagir et si quelqu'un peut m'aider, je serais reconnaissant!

Voici mon code pour 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;

Voici mon code pour 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;

Je n'ai que le code vide à l'intérieur de Quiz.js en ce moment.

javascriptreactjsreact-routermaterial-uireact-router-dom
1
dojomaker

tout d'abord, vérifiez la version de votre réact de routeur DOM. Cette erreur apparaît lorsque vous avez V6 de ROCK-ROUTER-DOM. V6 Avoir de nombreux changements révolutionnels afin d'essayer de lire la documentation officielle, vérifiez ceci: https://reacttraining.com/blog/react-router-v6-pre/ Maintenant pour votre question Partie React Router V6 Introduisez des itinéraires

Introduction des itinéraires

L'un des changements les plus excitants du V6 est le puissant nouvel élément. Il s'agit d'une mise à niveau assez significative de l'élément de V5 avec de nouvelles fonctionnalités importantes, notamment le routage relatif et la liaison, le classement automatique des itinéraires et les itinéraires et les mises en page imbriquées.

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

Vérifiez également le Guide de migration de V5 sur V6 https://github.com/reactTraine/react-router/blob/f59ee5488bc343cf3c957b7e0cc395Ef5EB572D2/docs/advanced-guides/migrature-5-à-6.md#relet et-liens

1
salik saleem