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

Question

我正在使用 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组件加载，只是使它和更换主页？

Answer 1

这目前只能在实验性并发模式下实现。在生产站点中使用它之前，您必须等到它普遍可用。