如何在到达路由器中使用多个反应悬架回退？

Question

我正在使用"@reach/router": "^1.2.1"，并且在我的App.js文件中，有一个后备组件要在加载路线时显示：

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

在路由级别提供后备组件的正确方法是什么？