en mi aplicación de reacción, el enrutamiento no funciona y arroja un error en la consola. en mi archivo de índice
import { BrowserRouter as Router, Route } from 'react-router-dom'; <React.StrictMode> <Router> <Route path="/" element={<App />} /> </Router> </React.StrictMode>y en mi App.js
import { Route, Routes, useHistory } from 'react-router-dom'; function App() { return ( <div className="App"> {/* <DataProvder> */} <Sidebar /> <Routes> <Route path='/' element={<Home />} /> <Route path='/students' element={<Students />} /> <Route path='/schools' element={<Schools />} /> <Route path='/campus' element={<Campus />} /> <Route path='/placement' element={<Placement />} /> <Route path='/courses' element={<Courses />} /> <Route path='/staff' element={<Staff />} /> </Routes> {/* </DataProvder> */} </div> ); } export default App;Al ejecutar esto, no hay nada que mostrar, pero en la consola arroja este error:
Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.¿Qué estoy haciendo mal aquí?
Todos los componentes de Route deben representarse mediante un componente de Routes u otro componente de Route en el caso de rutas anidadas.
La Route en el archivo index.js está empaquetada y procesada por el Router , que no es válido. Para resolverlo, envuélvalo en un componente de Routes .
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; <React.StrictMode> <Router> <Routes> <Route path="/" element={<App />}/> </Routes> </Router> </React.StrictMode> O simplemente represente la App directamente, ya que maneja la representación de Home en la ruta "/" por usted.
import { BrowserRouter as Router } from 'react-router-dom'; <React.StrictMode> <Router> <App /> </Router> </React.StrictMode>La <Route> en index.js necesita envolverse con <Routes>