Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

1.8K
Views
ReactJS: [Inicio] no es un componente de <Ruta>. Todos los componentes secundarios de <Routes> deben ser <Route> o <React.Fragment>

Estoy intentando navegar a "/cuestionario" cuando se hace clic en el botón Iniciar cuestionario.

Sin embargo, cuando compilo mi código, recibo el siguiente error en la aplicación del sitio web: [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 se lo agradeceria!

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;

Solo tengo código vacío dentro de Quiz.js en este momento.

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

En primer lugar, verifique la versión de su enrutador de reacción Dom. Este error aparece cuando tiene V6 de react-router-dom. V6 tiene muchos cambios innovadores, así que intente leer la documentación oficial, consulte esto: https://reacttraining.com/blog/react-router-v6-pre/ Ahora, para su pregunta, React router v6 presenta Rutas

Introduciendo Rutas

Uno de los cambios más emocionantes en v6 es el nuevo y poderoso elemento. Esta es una actualización bastante significativa del elemento v5 con algunas características nuevas importantes que incluyen enrutamiento y enlace relativos, clasificación automática de rutas y rutas y diseños anidados.

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

Consulte también 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

over 4 years ago · Santiago Trujillo Report

0

Solo Route o React.Fragment pueden ser elementos secundarios del componente Routes y viceversa. Ya está representando un componente Home en la ruta "/", así que elimine el componente <Home /> extraño. Parece que también está utilizando react-router-dom v6, por lo que los componentes de la Route ya no representan los componentes a través de una render o una propiedad de component , ahora representan los componentes como JSX en la propiedad del element .

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

para

 <Routes> <Route path="/" element={<Home />} /> <Route path="/quiz" element={<Quiz />} /> </Routes>
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!