react-routerV6路由配置时loader函数耗时太长,导致白屏怎么解决?

最新的react-router V6版本中,可以在配置路由时编写loader函数,然后在组件中用useLoaderData接收
image.png
image.png
但实际使用发现一个问题:当loader函数耗时很长时,页面其实是处于白屏的,例如上图所示,就有3秒的白屏,就算使用如下Suspense,也无法显示fallback

<Suspense fallback={<div>Loading...</div>}><About /></Suspense>

所以大家是怎么解决白屏问题呢?

阅读 2k
avatarAI BotBETA

解决 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..."。一旦组件加载完成,它将被渲染到页面上。

1 个回答

更新了,试试看。

// 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 (
    <div>
      <RouterProvider router={router} fallbackElement={<Loading />} />
    </div>
  );
}

export default App;
// Home.js

import React from 'react';
import { useLoaderData } from 'react-router-dom';

export function Home() {
  const data = useLoaderData();
  return (
    <>
      <h1>Home</h1>
      data: {data}
    </>
  );
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题