学习React-25-React-路由懒加载

懒加载

在大型应用中，为了优化首屏加载速度，我们通常使用懒加载技术按需加载路由对应的组件。React 提供了 React.lazy() 函数配合 Suspense 组件来实现此功能。

小栗子

ts 复制代码

import Home from "../pages/Home";
import About from "../pages/About";
import { createBrowserRouter } from "react-router";
import Layout from "../pages/Layout";
// 模拟异步
const sleep = (ms = 2000) => new Promise(resolve => setTimeout(resolve, ms));
const router = createBrowserRouter([
  {
    path: "/",
    Component: Layout,
    children: [
      {
        path: "home",
        Component: Home, // 同步
      },
      {
        path: "about",
        // 关键：lazy 返回一个 Promise，resolve 的对象里可放 Component / loader / action 等
        lazy: async () => {
          await sleep(); 
          const about = await import("../pages/About"); 
          return { Component: about.default };
        }
      },
      
    ]
  },

])

export default router;

效果展示

很明显，当点击About之后停顿了两秒之后才完成about页面的加载。

注意事项

lazy 只在该路由第一次命中时触发；若同一路由再次进入不会重复拉包（除非手动刷新页面）。
如果路由还配置了 loader，每次导航都会重新执行 loader，但组件 chunk 不会重新下载。
若使用声明模式（ + ）而非 createBrowserRouter，仍需用 React.lazy + Suspense 实现懒加载，react-router 不再额外封装。

useNavigation

useNavigation 是 React Router 库中的一个钩子函数（Hook），用于在组件中访问当前导航状态。它通常用于处理路由跳转、加载状态等场景。

核心功能

获取导航状态：通过 useNavigation() 可以获取当前导航的状态（如 idle、submitting、loading）。
执行导航操作：返回的 navigate 函数可用于编程式路由跳转。

代码示例

上面的懒加载虽然提高了性能，但是用户体验不好，下面是优化方案。

ts 复制代码

import { Spin } from 'antd';
import React from 'react';
// Outlet 子路由出口
import { Outlet, useNavigation } from 'react-router';


const Content: React.FC = () => {
  const navigation = useNavigation()
  console.log('路由状态', navigation.state)
  const isLoding = navigation.state === 'loading'
  return <div>
      {isLoding ? <Spin tip="Loading" size="large" style={{display: 'block', margin: '200px auto'}} /> : <Outlet />}
    </div>

};

export default Content;

效果如下

在点击About的时候，navigation.state的状态会经过 idle →loading→idle变化。

注意事项

路由版本依赖：仅适用于 React Router v6 及以上版本。
组件层级：必须在或的子孙组件中使用。
状态时效性：location 和 formData 仅在导航过程中有效，完成后会重置。