Как использовать множественные отклики в режиме ожидания с маршрутизатором?

Question

Я использую "@reach/router": "^1.2.1" и в моем App.js file У меня есть резервный компонент, который нужно показать во время загрузки моих маршрутов:

<React.Suspense fallback={<MainLandingPageLoadingScreen />}>
  <Router>
    <MainLandingPage path="/" />
    <AnotherLandingPage path="/coolbeans" />
    <NotFound default />
  </Router>
</React.Suspense>

Но в зависимости от маршрута я хочу использовать другой загрузочный компонент в качестве запасного варианта, так что-то вроде:

<Router>
  <React.Suspense fallback={<AnotherLandingPageLoadingScreen />}>
    <MainLandingPage path="/" />
    <NotFound default />
  </React.Suspense>

  <React.Suspense fallback={<AnotherLandingPageLoadingScreen />}>
    <AnotherLandingPage path="/coolbeans" />
  </React.Suspense>
</Router>

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

<React.Suspense fallback={<MainLandingPageLoadingScreen />}>
  <Router>
    <MainLandingPage path="/" />
    <NotFound default />
  </Router>
</React.Suspense>

<React.Suspense fallback={<AnotherLandingPageLoadingScreen />}>
  <Router>
    <AnotherLandingPage path="/coolbeans" />
  </Router>
</React.Suspense>

Как правильно предоставить запасной компонент на уровне маршрутизации?

Answer 1

Привет, у меня был этот сценарий с использованием React Router вместо Reach Router, но я думаю, что применима та же идея.

Вы по-прежнему хотите, чтобы вокруг всех ваших маршрутов был только один компонент Suspense: