Don't nest `Switch` components about boilermaker HOT 2 OPEN

I was thinking maybe we could find a solution if we flattened the loggedIn routes. I'm not 100% sure I'm parsing the issue as described, so this might not be a step in the right direction anyway. Ultimately, don't think this is a good avenue to explore as a change to boilermaker. But I did find it interesting.

        <Switch>
          {someCondition && [
            <Route
              path="/conditional-a"
              component={() => <h1>Conditional A</h1>}
            />,
            <Route
              path="/conditional-b"
              component={() => <h1>Conditional B</h1>}
            />,
          ]}
          <Route
            path="/non-fragment"
            component={() => <h1>Not Conditional</h1>}
          />
          <Route
            path="/"
            component={() => <h1>Home</h1>}
          />
        </Switch>

Arguments against this:

• You get the elements in an array should have a key warning.
• It mixes an array that looks A LOT like JSX and JSX side by side.

I also tried using <React.Fragment> instead of the array, but React.Children.* does not interpret fragment children the way we'd want it to.

from boilermaker.

Hm, that's an interesting possibility. I think the key issue could obviously be mitigated by, well, adding keys (the valye would be the path. But that gets even more verbose / weird.

Maybe we can double down on this. Put all routes in arrays (and map over them to add keys?), then make the Switch contain a concatenation of them, e.g. [...publicRoutes, ...loggedInRoutes, ...fallbackRoutes] or similar.

Alternatively, we back off from truly dealing with this in Boilermaker, but put in a comment that says if the inner switch activates, nothing below it will work, so users need to add a fallback route to the inner switch if applicable.

from boilermaker.