带有 Suspense 的 React Router 无法使用 React Router v5 呈现

Question

我们正在尝试使用这种构造，以便可以使用 React Suspense 延迟加载通过 React Router 呈现的组件：

      <Route
        path="about"
        element={
          <React.Suspense fallback={<>...</>}>
            <About />
          </React.Suspense>
        }
      />

Stackblitz 上带有 Suspense 示例的官方 React Router 可以很好地与 React Router v6 配合使用：

https://stackblitz.com/edit/github-rkrnhn-jfpo9b?file=src%2FApp.tsx

但是它不适用于 React Router v5。没有渲染。

https://stackblitz.com/edit/github-rkrnhn?file=package.json

以上两者之间的唯一区别是 React Router 版本。如果我们尝试在我们的应用程序中实现 Suspense，我们也会看到这种行为。

React Router v6 仍然缺少一些功能，例如 see this unsolved issue 所以我需要一个 v5 解决方案。

v5 需要一些不同的语法吗？

Answer 1

我在这里更新了 React Route v5 的 stackblitz，请检查。

<React.Suspense fallback={<>..</>}>
        <Switch>
          <Layout>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route path="/dashboard" component={Dashboard} />
          </Layout>
        </Switch>
      </React.Suspense>

你可以在这里找到例子here

带有 Suspense 的 React Router 无法使用 React Router v5 呈现

React Router with Suspense failing to render with React Router v5

react-router

react-suspense