Oye, estoy luchando con este problema.
Esta es App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import Home from './pages/Home' import About from './pages/About' const App = () => { return( <> <Router> <Routes> <Route path="/" component={Home} exact></Route> <Route path="/about" component={About}></Route> </Routes> </Router> </> ) } export default AppEsto es Inicio.js
const Home = () => { return ( <h1>Hello from home page</h1> ) } export default HomeEsto es Acerca de.js
const About = () => { return ( <h1>Hello from about page</h1> ) } export default About¡Después de esto, todo el contenido del código no se muestra en la página de inicio y en la página de información!
En la versión 6 cambiaron la forma de pasar los componentes a las rutas. Ahora usa el apoyo del elemento y también usa los corchetes angulares alrededor del nombre del componente.
Refiriéndose a los documentos exactos para configurar rutas .
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import Home from './pages/Home' import About from './pages/About' const App = () => { return( <> <Router> <Routes> <Route path="/" element={<Home/>} /> <Route path="/about" element={<About/>} /> </Routes> </Router> </> ) } export default App