Перенаправление не работает внутри коммутатора, когда используется фрагмент

Question

Версия

"react-router": "5.0.1",

Контрольный пример

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

Шаги для воспроизведения

Показанный пример Switch, Redirect сценарий использования.

Ожидаемое поведение

Следует перенаправить на заданный redirectUrl путь, если не найдено ни одного пути.

Фактическое поведение

Действует как нет Redirectбыл предоставлен в конце коммутатора. Возможно, проблема вызвана React.Fragment, который использовался внутри Switch. Перенаправление работает нормально, когда оно удалено.

Пример песочницы

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

Answer 1

Все дочерние элементы <Switch> должны быть <Route> или <Redirect> элементами. Будет обработан только первый дочерний элемент, соответствующий текущему местоположению.

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

Поскольку вы используете Fragment, вы добавляете дополнительный дочерний элемент, который не поддерживается Switchтаким образом, ваш код не рендерится.

Вы должны переключить свой код, как показано ниже, который добавляет условный маршрут без использования фрагмента:

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

Если вы беспокоитесь о повторении кода, вы можете добавить дополнительный слой в свойRoute примерно как ниже:

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