React lazy loaded route приводит к тому, что перенаправление несовпадающих маршрутов на /404 не работает

Question

Я пытался создать страницу 404 not found и перенаправить туда все несовпадающие маршруты, в настоящее время настроенные со всем контекстом как:

            <Switch>
        <Route path="/faq" component={FAQ}></Route>

        <Route path="/404">
          <NotFound />
        </Route>

        <Suspense fallback={<div>Loading ...</div>}>
          <Route path="/admin" component={AdminModule}></Route>
        </Suspense>

        <Redirect exact={true} from="*" to="/404" />
      </Switch>

• Если я перемещу компонент перенаправления над ожиданием с помощью ленивого загружаемого компонента, я больше не смогу активировать маршруты для модуля администратора.
• Если я перемещаю все после приостановки, включая /404, он больше не загружает компонент NotFound для маршрута / 404 даже при переходе к нему вручную.

Пробовал различные другие решения, которые я нашел в документации, но ни одно из них, похоже, не работает, это намеренно или ошибка? если это по дизайну, то какой? Это похоже на вариант использования, который может понадобиться каждому приложению.

Answer 1

Вы не должны использовать Suspense внутри Switch. Ваш Switch должен быть обернут компонентом Suspense.

      <Suspense fallback={<div>Loading ...</div>}>
    <Switch>
     <Route path="/faq" component={FAQ}></Route>

     <Route path="/404">
         <NotFound />
     </Route>

     <Route path="/admin" component={AdminModule}></Route>

     <Redirect exact={true} from="*" to="/404" />
  </Switch>
</Suspense>