Código App.js-
import React from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import { Container } from "react-bootstrap"; import Header from "./components/Header"; import Footer from "./components/Footer"; import HomeScreen from "./screens/HomeScreen"; const App = () => { return ( <Router> <Header /> <main className='py-3'> <Container> <HomeScreen /> </Container> </main> <Footer /> </Router> ); }; export default App;Mi app.js era así y todo funcionaba bien. Pero después de eso, agregué la etiqueta de ruta y el código quedó así
import React from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import { Container } from "react-bootstrap"; import Header from "./components/Header"; import Footer from "./components/Footer"; import HomeScreen from "./screens/HomeScreen"; const App = () => { return ( <Router> <Header /> <main className='py-3'> <Container> <Route exact path='/' component={HomeScreen} /> </Container> </main> <Footer /> </Router> ); }; export default App;Pero después de agregar Route, ¿HomeScreen no se muestra? ¿Alguien puede decirme por qué sucede esto?
En react-router-dom v6, el componente Route se debe representar en un componente Routes , y los componentes enrutados se representan en el accesorio del element como un ReactElement ( también conocido como JSX ) ya que el component , y children accesorios de funciones secundarias y de render ya no existen.
import React from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { Container } from "react-bootstrap"; import Header from "./components/Header"; import Footer from "./components/Footer"; import HomeScreen from "./screens/HomeScreen"; const App = () => { return ( <Router> <Header /> <main className='py-3'> <Container> <Routes> <Route path='/' element={<HomeScreen />} /> </Routes> </Container> </main> <Footer /> </Router> ); };