Estoy enrutando una página a la raíz, pero aparece como una página en blanco, sin importar qué archivo js use. No estoy seguro de qué está mal, no he usado reaccionar desde el año pasado, pero parece que han actualizado react-router-dom para que ya no use Switch. ¿Alguien sabe la sintaxis correcta para que aparezca la página? Aquí están los archivos:
WebRoutes.js
import React from "react"; import { Routes, Route } from 'react-router-dom'; import { useNavigate } from "react-router-dom"; // Webpages import App from './App'; import Welcome from './welcome'; import SignUp from './Signup' export default function WebRoutes() { return ( <Routes> <Route path='/'> <Welcome /> </Route> </Routes> ); }índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import WebRoutes from './WebRoutes'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <WebRoutes /> </React.StrictMode>, document.getElementById('root') );En react-router-dom@6 , los componentes de Route no representan el contenido enrutado como elementos secundarios, sino que usan el element prop. Otros componentes Route son los únicos hijos válidos de una Route en el caso de construir rutas anidadas.
export default function WebRoutes() { return ( <Routes> <Route path='/' element={<Welcome />} /> </Routes> ); }Asegúrese de haber renderizado un enrutador alrededor de su aplicación.
import { BrowserRouter as Router } from 'react-router-dom'; ReactDOM.render( <React.StrictMode> <Router> <WebRoutes /> </Router> </React.StrictMode>, document.getElementById('root') );