Sé que esta pregunta se ha hecho muchas veces. Pero, lamentablemente, después de implementar todas las soluciones posibles, sigo teniendo una página en blanco en el navegador después de usar Route, Routes.
Mi código:
import { Container } from 'react-bootstrap' import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Header from './components/Header' import Footer from './components/Footer' import HomeScreen from './screens/HomeScreen' function App() { return ( <Router> <Routes> <Header /> <main className="py-5"> <Container> <Route path='/' component={<HomeScreen/>} /> </Container> </main> <Footer/> </Routes> </Router> ); } export default App;¡Gracias por la ayuda!
react-router-dom@6 , los componentes de Route solo pueden ser representados directamente por el componente de Routes u otro componente de Route en el caso de la anidación de rutas.Route también cambió significativamente. Ya no hay ningún accesorio de función de component o render e children . Se reemplazan por un accesorio de un solo element que toma un React.ReactNode , también conocido como JSX. Mueva el componente de Routes hacia abajo en el árbol para envolver directamente los componentes Route y cambie a usar el element prop para pasar el contenido enrutado.
function App() { return ( <Router> <Header /> <main className="py-5"> <Container> <Routes> <Route path='/' element={<HomeScreen />} /> </Routes> </Container> </main> <Footer/> </Router> ); }Creo que no debería anidar elementos que no sean <Route> dentro del componente <Routes> . Cuando cambia la ubicación, <Routes> mira a todos sus hijos <Route> y elige el que se ajuste. Anidaste tu elemento <Route> dentro de <Header> , así que probablemente ese sea el problema. Intente reorganizar la estructura y mueva Rutas al nivel superior.