Estoy haciendo un curso donde se usa la versión 5 de react-router-dom donde ha habido algunos cambios bastante significativos en react-router-dom .
Cuando, al iniciar la aplicación, aparece una página blanca en el navegador, usando devtools aparece un mensaje de error: Error no detectado: una <Route> solo se debe usar como elemento secundario del elemento <Routes> , nunca se representa directamente. Envuelva su ruta en una ruta.
Antes de decidir escribir esta publicación, busqué en varios foros sobre cómo resolver este error, las dos soluciones principales son las siguientes:
react-router-dom a una más antigua (no quiero usar este método, me gustaría solucionar el problema)Route en Routes . Esto es lo que hice. Pero no funcionó.Aplicación.js
import "./App.css"; import Dashboard from "./components/Dashboard"; import Header from "./components/Layout/Header"; import "bootstrap/dist/css/bootstrap.min.css"; import { BrowserRouter as Routes, Router, Route } from "react-router-dom"; import AddProject from "./components/Project/AddProject"; import { Component } from "react"; class App extends Component { render() { return ( <Router> <div className="App"> <Header /> <Routes> <Route exact path="/dashboard" component={Dashboard} /> <Route exact path="/addProject" component={AddProject} /> </Routes> </div> </Router> ); } } export default App; Cambié la importación, le agregué Routes . Envolví la Route en Routes . Pero sigue dando el mismo error.
No sé si debo eliminar el Router , pero si lo hago, recibe el error: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
La sintaxis de la Route también ha cambiado. Ahora funciona así: <Route path="/dashboard" element={<Dashboard/>} /> . Puedes ver más en la documentación
Está importando el BrowserRouter como Routes y luego importando el Router de bajo nivel. Todavía te falta el componente Routes real que envuelve las rutas.
Corrija las importaciones y luego corrija la ruta API/sintaxis.
Ejemplo:
import { BrowserRouter as Router, // <-- this is the router Routes, // <-- this is the Routes Route } from "react-router-dom"; import AddProject from "./components/Project/AddProject"; import { Component } from "react"; class App extends Component { render() { return ( <Router> <div className="App"> <Header /> <Routes> <Route path="/dashboard" element={<Dashboard />} // <-- element prop takes ReactNode/JSX /> <Route path="/addProject" element={<AddProject />} // <-- element prop takes ReactNode/JSX /> </Routes> </div> </Router> ); } }También puede revisar la actualización de la guía de migración/actualización de v5 para ver los otros cambios importantes de RRDv5 a RRDv6.