reactjs - 如何将延迟加载应用于 react-router-dom？

Question

我有一个包含两个页面的基本路由：home 和 about。我已经用 react.lazy 导入了这两个页面，并用一个悬念后备来包装它们。

主页加载良好，但是当我想导航到 /about 时，页面变为空白，控制台中没有任何错误。怎么会这样？

另外，如何在本地开发中看到 about 页面在调用之前未加载？

这是路线和代码：

const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

export default function App() {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Suspense fallback="loading home...">
            <Route exact path="/" component={Home} />
          </Suspense>
          <Suspense fallback="loading about...">
            <Route path="/about" component={About} />
          </Suspense>
        </Switch>
      </BrowserRouter>
    </>
  );
}


export default function Home() {
  return (
    <>
      <h1>HOME</h1>
      <Link to="/about">about</Link>
    </>
  );
}

export default function About() {
  return (
    <>
      <h1>About</h1>
      <Link to="/">home</Link>
    </>
  );
}

谢谢！