javascript - 保持当前页面呈现，直到使用 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

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