最新的react-router V6版本中,可以在配置路由时编写loader函数,然后在组件中用useLoaderData接收
但实际使用发现一个问题:当loader函数耗时很长时,页面其实是处于白屏的,例如上图所示,就有3秒的白屏,就算使用如下Suspense,也无法显示fallback
<Suspense fallback={<div>Loading...</div>}><About /></Suspense>
所以大家是怎么解决白屏问题呢?
最新的react-router V6版本中,可以在配置路由时编写loader函数,然后在组件中用useLoaderData接收
但实际使用发现一个问题:当loader函数耗时很长时,页面其实是处于白屏的,例如上图所示,就有3秒的白屏,就算使用如下Suspense,也无法显示fallback
<Suspense fallback={<div>Loading...</div>}><About /></Suspense>
所以大家是怎么解决白屏问题呢?
解决 React Router v6 中因 loader 函数耗时过长导致的白屏问题,可以通过结合 Suspense 和 React.lazy 来实现。
首先,你需要确保你的 React 和 React Router v6 版本是最新的,并且已经安装了 React.lazy 和 Suspense。
然后,在你的路由配置中,你可以使用 React.lazy
来动态加载你的组件,并在组件加载过程中显示 fallback 内容。
以下是一个示例:
import { useRoutes, useNavigate } from 'react-router-dom';
import { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function MyRoutes() {
const navigate = useNavigate();
return (
<Routes>
<Route path="/my-component" element={<MyComponent />} />
</Routes>
);
}
function App() {
return (
<div>
<nav>
<Routes>
<Route path="/" element={<Navigate to="/my-component" />} />
</Routes>
</nav>
<MyRoutes />
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</div>
);
}
在上述示例中,当用户导航到 "/my-component" 路径时,React 会使用 React.lazy
动态加载 MyComponent
组件。在组件加载过程中,Suspense
组件会显示 fallback 内容,即 "Loading..."。一旦组件加载完成,它将被渲染到页面上。
4 回答1.7k 阅读
2 回答1.2k 阅读✓ 已解决
1 回答1.1k 阅读✓ 已解决
4 回答1.5k 阅读
1 回答763 阅读✓ 已解决
2 回答947 阅读✓ 已解决
2 回答1.1k 阅读
更新了,试试看。