CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
SnakesCantWearBoots
SnakesCantWearBoots

Reputation: 367

How to import or use only child components?

For example I have these components

first.js

<div>
   <Route path='/' />
   <Route path='/first' />
</div>

second.js

<div>
    <Route path='/second' />
    <Redirect to='/something' />
</div>

And then i have a component that has this

<Switch>
    <First>
    <Second>
</Switch>

I am using React-Router and Switch does not work if it's child components are not Route. So how does one just strip those divs from first and second components so only things left are the routes?

Upvotes: 1

Views: 66

Answers (2)

Stiliyan
Stiliyan

Reputation: 176

You can wrap them in fragment like this:

<React.Fragment>
  <Route path='/' />
  <Route path='/first' />
</React.Fragment>

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can return them in an array:

return [
  <Route path='/' key='root' />,
  <Route path='/first' key='first' />
]

Note: returning an array is necessary to provide a key props.

Upvotes: 1

Related Questions