ReactJS: [Accueil] n'est pas une <Route> composant. Tous les enfants de <Routes> doit être <Route> ou <Réagir.Fragment>

0

La question

Je suis en train de naviguer vers "/quiz" dès le Début de Quiz bouton est cliqué.

Cependant quand je compile mon code, j'obtiens l'erreur suivante sur le site de l'application: [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 reconnaissante!

Voici mon code pour les 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 les 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 Quiz.js à l'heure actuelle.

2

La meilleure réponse

2

tout d'abord vérifier la version de Votre réagissent routeur Dom .Cette erreur apparaît lorsque vous avez V6 de réagir-routeur-dom. V6 avoir beaucoup de changement révolutionnaire donc, essayez de lire la documentation officielle check this out:https://reacttraining.com/blog/react-router-v6-pre/ Maintenant pour ta question, la partie Réagir routeur v6 introduire des Routes

L'Introduction De Routes

L'une des plus excitantes les changements dans la v6 est la nouvel élément puissant. C'est une question assez importante mise à niveau à partir de v5 de l'élément avec d'importantes nouvelles fonctionnalités, y compris par rapport routage et la liaison, route automatique du classement, et imbriquée des itinéraires et des tracés.

  <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 à partir de v5 à la 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

Merci beaucoup pour votre réponse, et il fonctionne parfaitement bien!
dojomaker

salem Est-il normal que je ne reçois pas mon image d'arrière-plan lorsque je clique sur le bouton à droite? Désolé si c'est une question stupide.
dojomaker

je peux répondre à cela en regardant votre code .partager une autre question
salik saleem

c'est ma principale de code, et j'ai 2 autres fichiers d'en-tête et pied de page, mais je ne pense pas qu'ils sont nécessaires. Pouvez-vous aider sur la base de ces fichiers ou avez-vous besoin de voir?
dojomaker
1

Seulement Route ou React.Fragment sont autorisés à être des enfants de la Routes composant, et vice-versa. Vous êtes déjà rendu un Home composant sur le "/" chemin d'accès, donc, supprimer le superflu <Home /> composante. Il semble que vous êtes également à l'aide de react-router-dom v6, de sorte que le Route les composants de ne plus rendre les composants via un render ou component prop, ils ont désormais rendre des composants comme JSX sur le element prop.

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

pour

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

Merci pour votre réponse! Si j'utilise votre code compile sans erreur mais il lance une page vide. Il ne se lance pas mon home.js code. Avez-vous une idée de quoi cela peut-il être le cas? Si vous pouvez aider, je serais vraiment heureux!
dojomaker

@dojomaker Pas sûr, il pourrait y avoir quelque chose d'autre se passe dans votre code, ou que vous avez raté une chose qui doit être corrigée. Cette réponse est la même que l'autre vous avez accepté, donc peut-être quelque chose s'est corrigé en local sur votre serveur de développement à l'heure entre les réponses.
Drew Reese

Dans d'autres langues

Cette page est dans d'autres langues

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