0
220
Vistasreact router to be used as the child of <Routes> element error
I created a react app and use react-router-dom for navigation. WHen i wrapp the app.js with BrowseRouter the following error shows.
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>.
the following is my 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>
);
}
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You should wrap all the Route components in a Routes component, and render the components for each route on the element prop.
function App() {
return (
<div className="App">
<BrowserRouter>
<div className="App">
<Header />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
<Footer />
</div>
</BrowserRouter>
</div>
);
}
·
Juan Pablo Isaza
Denunciar
0
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>
);
}
or in React-router-dom version 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>
);
}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta