CODEWITHSUNDEEP
javascripthtmlreactjsreact-routerreact-router-dom
martinek
martinek

Reputation: 181

Render multiple elements in React Router v6.+

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

Upvotes: 15

Views: 19919

Answers (5)

Prateek Yadav
Prateek Yadav

Reputation: 21

for Render multiple components in React Router for the newer version of react-router-dom (I'm using v6.5.0)

<Route path="/" element={ 
        <>
          < AddTodo addTodo={ addTodo }/>
          <Todos todos={todos} onDelete={onDelete}/>
        </>}>
      </Route>

Upvotes: 2

Ramkishan Saini
Ramkishan Saini

Reputation: 11

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

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

Upvotes: 1

navinrangar
navinrangar

Reputation: 1408

Wrap multiple components in the fragment tag. This is how I did this:

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

Upvotes: 0

Kevin K
Kevin K

Reputation: 374

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/>}/></>} />

Upvotes: 3

DevX
DevX

Reputation: 541

Try wrap them in a fragment

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

Upvotes: 38

Related Questions