Creé una aplicación de reacción y uso react-router-dom para la navegación. Cuando envuelvo app.js con BrowseRouter, aparece el siguiente error.
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>.el siguiente es mi App.js
import {BrowserRouter, Route} from 'react-router-dom' function App() { return ( <BrowserRouter> <div className="App"> <Header/> <Route exact path="/"> <Home/> </Route> <Footer/> </div> </BrowserRouter> ); }Debe envolver todos los componentes de la Route en un componente de Routes y representar los componentes para cada ruta en la prop del element .
function App() { return ( <div className="App"> <BrowserRouter> <div className="App"> <Header /> <Routes> <Route path="/" element={<Home />} /> </Routes> <Footer /> </div> </BrowserRouter> </div> ); } import {BrowserRouter, Route,Switch} from 'react-router-dom' function App() { return ( <div className="App"> <Header/> <BrowserRouter> <Switch> <Route exact path="/"> <Home/> </Route> </Switch> </BrowserRouter> <Footer/> </div> ); }o en React-router-dom versión 6:
import {BrowserRouter, Route,Switch,Routes} from 'react-router-dom' function App() { return ( <div className="App"> <Header/> <BrowserRouter> <Routes> <Route exact path="/"> <Home/> </Route> </Routes> </BrowserRouter> <Footer/> </div> ); }