ReactJS: [Home] no es un <Ruta> componente. Todos los componentes de los niños de <Rutas> debe ser un <Ruta> o <Reaccionar.Fragmento>

0

Pregunta

Estoy tratando de navegar a "/quiz" al Iniciar Prueba en el botón es pulsado.

Sin embargo, cuando puedo compilar mi código de recibo el siguiente error en el sitio web de la aplicación: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Soy nuevo en reaccionar y si alguien me puede ayudar le estaría agradecido!

Aquí está mi código para 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;

Aquí está mi código para 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;

Sólo tengo código vacío en el interior Quiz.js en el momento.

2

Mejor respuesta

2

en primer lugar, verificar la versión de Su reaccionan router Dom .Este error aparece cuando usted tiene V6 de reaccionar-router-dom. V6 tiene muchos innovador cambiar, así que trate de leer la documentación oficial mira esto:https://reacttraining.com/blog/react-router-v6-pre/ Ahora por parte de la pregunta Reaccionar router v6 introducir Rutas

La Introducción De Rutas

Uno de los más emocionantes cambios en la v6 es la nuevo elemento poderoso. Esta es una muy importante actualización a partir de v5 elemento con algunas nuevas características, incluyendo relación de enrutamiento y la vinculación, la ruta automática de la clasificación y la anidados rutas y diseños.

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

También compruebe la guía de migración de 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

Muchas gracias por su respuesta funciona perfectamente bien!
dojomaker

salem Es normal que no estoy recibiendo de mi imagen de fondo cuando hago clic en el botón a la derecha? Lo siento si es una pregunta tonta.
dojomaker

me puede responder a esta mirando su código .compartir otra pregunta
salik saleem

este es mi código principal, y tengo otros 2 archivos de encabezado y pie de página, pero no creo que sean necesarios. Puede usted ayudar basadas en estos archivos o ¿tiene que ver?
dojomaker
1

Sólo Route o React.Fragment se permite a los niños de la Routes componente, y viceversa. Ya estás de representación de una Home componente en el "/" ruta de acceso, por lo que eliminar los extraños <Home /> componente. Parece que usted también está usando react-router-dom v6, por lo que el Route componentes de procesamiento más largos componentes a través de un render o component la proposición, que ahora procesar componentes como JSX en el element prop.

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

a

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

Gracias por tu respuesta! Si yo uso el código se compila sin errores, pero el lanzamiento de una página vacía. No arranca mi home.js código. ¿Tiene usted alguna idea de por qué puede ser esto? Si usted puede ayudar estaría muy feliz!!!
dojomaker

@dojomaker No estoy seguro, podría haber algo más en su código, o usted ha omitido una cosa que necesita ser corregido. Esta respuesta es la misma como más aceptado, aunque, así que tal vez algo se corrigió a sí mismo de forma local en el servidor de desarrollo en la hora entre las respuestas.
Drew Reese

En otros idiomas

Esta página está en otros idiomas

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