如何使用到达路由器的多个反应悬念回退

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>

这是行不通的，因为路由器需要缠绕在悬念周围，而不是这样。但是，如果我像下面这样拆分它，那么第二个路由器列表不会被拾取，路由是 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 路由器而不是 Reach 路由器的场景，但我认为同样的想法将适用。

您仍然希望在所有路线上都包含 1 个悬念组件：

<Router>
  <React.Suspense fallback={// will get to this}>
    <MainLandingPage path="/" />
    <NotFound default />
    <AnotherLandingPage path="/coolbeans" />
  </React.Suspense>
</Router>

但是，您需要创建一个函数以传递到检查特定组件路径名的回退中。React 路由器有 useLocation(( 钩子，它可以为你抓取路径名，看起来 Reach 路由器也有一个定位功能。

您的函数将尝试匹配路径名，并根据您导航到的路径返回相应的加载组件：

const showAppropriateLoadingComponent = (pathname: string) => {
  switch (pathname) {
    case '/':
      return <LoadingComponent1 />;
      break;
    case '/coolbeans':
      return <LoadingComponent2 />;
      break;
    case default:
      return <DefaultLoadingComponent />
      break;
  }
}

然后在实际的路由器文件中，您只需在悬念回退中调用函数，并将路径名作为参数传入。

const Router = () => {
  const { pathname } = useLocation();
  <Router>
    <React.Suspense fallback={showAppropriateLoadingComponent(pathname)}>
      <MainLandingPage path="/" />
      <NotFound default />
      <AnotherLandingPage path="/coolbeans" />
    </React.Suspense>
  </Router>
}