各位大佬好，我现在在维护一个生产级的纯客户端SPA，最近在站点地图实现上卡壳了，想请教下适配当前技术栈的现代化解决方案。

技术栈概述 #

• React 19 + TypeScript
• React Router v7（react-router-dom v7.1.5），所有路由集中定义在all_routes.tsx文件中
• Vite 作为构建工具

路由结构详情 #

目前项目有270+路由，主要分为三类：

• 静态公开页面：首页、关于我们、联系我们、服务条款等
• 动态参数路由：
  • /hp/:slug - 服务商个人主页
  • /service-details/:id/:slug - 服务详情页
• 受保护路由：用户/服务商后台管理面板

当前现状 #

我现在只在/sitemap路径做了一个简单的HTML站点地图组件，但功能太基础，完全满足不了生产环境的需求。

核心需求 #

1. 同时提供XML和HTML格式的站点地图，分别对应/sitemap.xml和/sitemap.html路径，兼顾搜索引擎爬虫和普通用户的访问需求
2. 站点地图必须包含所有公开静态路由，自动排除受保护的后台路由
3. 动态路由条目需要从真实API拉取数据生成（比如所有服务商的slug、所有服务的id和slug）
4. 为每个条目配置合理的lastmod、changefreq和priority属性
5. 支持大规模动态路由场景：未来服务商/服务数量可能会达到数千级别，需要高效处理

已踩过的坑 #

我之前查过react-router-sitemap这个包，但它最后一次更新是2019年，早就没人维护了，和React Router v7完全不兼容，根本跑不起来。

想请教的问题 #

有没有适配React 19 + React Router v7 + Vite的现代化站点地图实现方案？尤其是针对大规模动态路由的场景：

• 是在构建时预生成静态文件？还是在运行时动态生成响应？
• 如何在Vite中配置，让/sitemap.xml和/sitemap.html能被正常访问到？
• 有没有高效处理API拉取大量动态路由数据的技巧？