Using Fragments inside Switch

React 16.2 added the concept of Fragments. I would like to be able to use Fragments inside Switch components to do things like this:

<Switch>
  <>
    <Route path="/" />
    <Route path="/about" />
  </>
  <>
    <Route path="/messages" />
    <Route path="/messages/new" />
  </>
</Switch>

The application I am working on is composed by small modules and all those small modules are composed together in a single app based on some conditions. Since routes need to be direct children of Switch those small modules need to expose routes as an array. However using fragments would make it a lot simpler and more readable.

[jamesplease]

I could see a case being made of not traversing the entire tree (which is clearly not going to work), but instead simply checking if a particular child is a Fragment. And, if it is, checking its immediate children. This helps with cases such as:

<Switch>
  {blah.map(b => (
    <>
      <routeA/>
      <routeB/>
      <routeC/>
    </>
  ))}
</Switch>

which seem like they will become pretty common as React 16 adoption grows. The alternative, using an array syntax with keys, is pretty ugly.

@timdorr, would you consider just looking inside of Fragments, or nah?

[timdorr]

Actually, I specifically don’t want to flatten sub-children. It should only check child.type === Fragment and then return child.props.children for processing in the loop. No recursion.