问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
pc120
    68318126170

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

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

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

    reactreact-router-dom
    阅读 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 个回答
    得票最新
    头像
    热饭班长
      3.7k20247350

      更新了，试试看。

      // 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}
    </>
  );
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题