Render multiple elements in React Router v6.+

user_8929432 0
Viewed 8547

I need the answer to this question: Render multiple components in React Router but for the newer version of react-router-dom (I'm using v6.0.2)

the older version of router-dom would work like this:

<Route path="/">
 <Header/>
 <Home/>
</Route>

while the new one looks like this:

<Route exact path="/" element={<Home/>}/>

I'm not sure how to add the Header as well

react-router-dom react-router reactjs html javascript
3 Answers

Try wrap them in a fragment

<Route exact path="/" element={<><Header/><Home/></>}/>
user_121049710

I ran in to the same issue, but also needed one page to get data from the parent element.

<Route path="/" element={<><Header/><Home children={<HomeDataProvider/>}/></>} />
user_53764800

try this if u want to add two or more component just put them inside of fragment tag

<Route exact path="/" element={<></>}/>

user_190680960
Related