保持当前页面呈现，直到新页面加载有React.lazy和React.Suspense

问题描述

我正在使用React路由器根据特定的URL呈现我的不同页面。不，我想使用React.lazy来延迟加载所有页面组件：

import React from "react";

import { browserRouter as Router,Switch,Route,Link } from "react-router-dom";

const Page = React.lazy(() => {
  return import("./Page");
});

const App = () => {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading page...</div>}>
        <Switch>
          <Route exact path="/">
            <h1>Home</h1>
            <Link to="/page">Go to another page</Link>
          </Route>

          <Route path="/page" component={Page} />
        </Switch>
      </React.Suspense>
    </Router>
  );
};

export default App;

这项工作确实很好，但是当我转到/page时，我所有的Home都消失了，而我只看到后备Loading page...组件（该页面消失了，然后另一个页面很快出现了，这令人不安用户）。

这是React.Suspense的默认行为，但是在这种情况下，有一种方法可以使实际的首页显示在屏幕上，在顶部显示Loading page...消息，并在加载Page组件时，仅渲染它并替换主页？

解决方法

目前仅在实验性Concurrent Mode中可行。在生产站点中使用它之前，您将不得不等到它变得普遍可用。

,

我终于明白了这个问题的含义。 我看到两种有关如何解决此问题的方案。

1. 您可以异步地延迟加载页面-lazy（（）=> import（'。这是一个回报承诺，因此您可以默认情况下通过一些标志隐藏页面，并在Page完成加载并显示所需内容后进行更改。
2. 您可以创建一个全屏加载程序组件并将其传递给React.Suspend-这样用户就不会看到页面的切换方式