Redirect doesn't work inside Switch when Fragment has been used

Question

Version

"react-router": "5.0.1",

Test Case

<Switch>
    <Route
        component={TestComponent}
        key={TestComponentPath}
        path={TestComponentPath}
        exact
    />
    {
        exampleCondition && (
            <>
                 <Route
                    component={TestComponent2}
                    key={TestComponentPath2}
                    path={TestComponentPath2}
                    exact
                 />
                 <Route
                    component={TestComponent3}
                    key={TestComponentPath3}
                    path={TestComponentPath3}
                    exact
                 />
            </>
        )
    }
    <Redirect to={redirectUrl} />
</Switch>

Steps to reproduce

Showed example Switch, Redirect use case.

Expected Behavior

Should redirect to the given redirectUrl path if no path is matched.

Actual Behavior

Acts like no Redirect has been provided at the end of switch. Problem is probably caused by React.Fragment that has been used inside Switch. Redirection works fine when it's removed.

Example sandbox

https://codesandbox.io/s/react-router-tklng

Answer 1

All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered.

https://reacttraining.com/react-router/web/api/Switch/children-node

Because you are using Fragment, you are adding additional child that is not supported by Switch thus your code dont render.

you should switch your code as below which adds conditional route without using fragment:

<Switch>
    <Route
        component={TestComponent}
        key={TestComponentPath}
        path={TestComponentPath}
        exact
    />
    { exampleCondition &&
                 <Route
                    component={TestComponent2}
                    key={TestComponentPath2}
                    path={TestComponentPath2}
                    exact
                 /> }
    { exampleCondition &&
                  <Route
                    component={TestComponent3}
                    key={TestComponentPath3}
                    path={TestComponentPath3}
                    exact
                 /> }
    <Redirect to={redirectUrl} />
</Switch>

If you are worrying about repeating code you can add additional layer in your Route somewhat like below:

<Switch>
    <Route
        component={TestComponent}
        key={TestComponentPath}
        path={TestComponentPath}
        exact
    />
   {someCondition && [
            <Route
              component={TestComponent2}
              key={TestComponentPath2}
              path={TestComponentPath2}
              exact
            />,
            <Route
              component={TestComponent3}
              key={TestComponentPath3}
              path={TestComponentPath3}
              exact
            />
    ]}
    <Redirect to={redirectUrl} />
</Switch>