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

Posted 2023-02-21

【中文标题】如何使用到达路由器的多个反应悬念回退？

【英文标题】：How to use multiple react suspense fallbacks with reach router?

【发布时间】：2019-10-14 23:27:09

【问题描述】：

我正在使用"@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>

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

【问题讨论】：

你找到解决办法了吗？

【参考方案1】：

嘿，所以我在这个场景中使用了 React Router 而不是 Reach Router，但我认为同样的想法也适用。

你仍然希望在你的所有路由周围只包含 1 个 Suspense 组件：

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

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

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

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

然后在您的实际路由器文件中，您只需调用 suspense fallback 中的函数并将路径名作为参数传递。

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