懒加载路由发现

• 框架
• 数据
• 声明式

懒加载路由发现是一种性能优化，它会在用户浏览应用程序时逐步加载路由信息，而不是预先加载完整的路由清单。

启用懒加载路由发现（默认）后，React Router 只会在清单中发送初始服务器端渲染所需的路由。当用户导航到应用程序的新部分时，会动态获取额外的路由信息并将其添加到客户端清单中。

路由清单包含有关路由的元数据（JavaScript/CSS 导入、路由是否包含 loaders/actions 等），但不包含实际的路由模块实现。这使得 React Router 能够在不下载不必要的路由信息的情况下了解应用程序的结构。

路由发现过程

当用户导航到一个当前清单中不存在的新路由时

1. 路由发现请求 - React Router 向内部 /__manifest 端点发出请求
2. 清单补丁 - 服务器响应所需的路由信息
3. 路由加载 - React Router 加载必要的路由模块和数据
4. 导航 - 用户导航到新路由

预加载发现优化

为防止导航瀑布流，React Router 实现了预加载路由发现。当前页面上呈现的所有 <Link> 和 <NavLink> 组件都会通过向服务器发出的批量请求自动被发现。

该发现请求通常在用户点击任何链接之前完成，即使启用了懒加载路由发现，后续导航也会感觉是同步的。

// Links are automatically discovered by default
<Link to="/dashboard">Dashboard</Link>

// Opt out of discovery for specific links
<Link to="/admin" discover="none">Admin</Link>

性能优势

懒加载路由发现提供了多项性能改进

• 更快的初始加载 - 通过排除未使用的路由元数据，减小初始包大小
• 减少内存使用 - 仅在需要时加载路由信息
• 可扩展性 - 拥有数百个路由的应用程序会看到更显著的优势

配置

你可以在你的 react-router.config.ts 中配置路由发现行为

export default {
  // Default: lazy discovery with /__manifest endpoint
  routeDiscovery: {
    mode: "lazy",
    manifestPath: "/__manifest",
  },

  // Custom manifest path (useful for multiple apps on same domain)
  routeDiscovery: {
    mode: "lazy",
    manifestPath: "/my-app-manifest",
  },

  // Disable lazy discovery (include all routes initially)
  routeDiscovery: { mode: "initial" },
} satisfies Config;

部署注意事项

使用懒加载路由发现时，请确保你的部署设置能正确处理清单请求

• 路由处理 - 确保 /__manifest 请求能到达你的 React Router 处理程序
• CDN 缓存 - 如果使用 CDN/边缘缓存，请在清单端点的缓存键中包含 version 和 p 查询参数
• 多个应用程序 - 如果在同一域上运行多个 React Router 应用程序，请使用自定义的 manifestPath