react-routerV6路由配置时loader函数耗时太长,导致白屏怎么解决?-灵析社区
我只爱钱最新的react-router V6版本中,可以在配置路由时编写loader函数,然后在组件中用useLoaderData接收   但实际使用发现一个问题:当loader函数耗时很长时,页面其实是处于白屏的,例如上图所示,就有3秒的白屏,就算使用如下Suspense,也无法显示fallback Loading...}> 所以大家是怎么解决白屏问题呢?
加班使我熟睡更新了，试试看。
// App.js
import React from 'react';
import { RouterProvider, createHashRouter } from 'react-router-dom';
const delay = () =>
new Promise((resolve) => {
setTimeout(() => {
resolve([1, 2, 3]);
}, 3000);
});
function Loading() {
return loading...;
}
const router = createHashRouter([
{
path: '/',
loader: () => delay(),
lazy: async () => {
const { Home } = await import('./Home');
return { Component: Home };
},
},
]);
function App() {
return (
} />
);
}
export default App;
// Home.js
import React from 'react';
import { useLoaderData } from 'react-router-dom';
export function Home() {
const data = useLoaderData();
return (
Home
data: {data}
);
}