Reputation: 21
I am having issues with routing in react-router-dom
v6. My code is as follows :
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Routes, Link } from "react-router-dom";
function App() {
return (
//BEM
<Router>
<div className="app">
<Routes>
<Route path="/" element={[<Header />, <Home />]} />
</Routes>
</div>
</Router>
);
}
export default App;
Nothing gets rendered. Please help.
Upvotes: 2
Views: 86
Reputation: 46311
You should be giving a single component to element
property. Assuming that you wanna Header
on top of every route, try with this :
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Routes, Link } from "react-router-dom";
function App() {
return (
//BEM
<Router>
<div className="app">
<Header />
<Routes>
<Route path="/" element={<Home/>} />
</Routes>
</div>
</Router>
);
}
export default App;
If you want to have Header only on path /
, a cleaner way is to put it inside Home
. Otherwise you could do it like so:
import { BrowserRouter as Router, Routes } from "react-router-dom";
import './App.css';
import Header from './Header';
import Home from './Home';
function App() {
return (
<Router>
<div className="app">
<Routes>
<Route path="/" element={<><Header/><Home/></>} />
</Routes>
</div>
</Router>
);
}
export default App;
Upvotes: 1
Reputation: 1106
Have you tried wrapping them in fragment?
<Route path="/" element={<><Header/><Home/></>}/>
Upvotes: 0
Reputation: 123
Try to wrap multiple elements in Fragment
<Route path="/" element={<><Header/><Home/></>}/>
Upvotes: 0