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

问题描述

我有一个基本的路由，有两个页面：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>
    </>
  );
}

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）