React项目build后public目录下sitemap.xml无法访问怎么办

方案1：调整打包/部署配置（优先选择） #

React 官方的默认打包逻辑会将 public 目录下的所有文件原封不动复制到 build 产物的根目录，正常情况下 sitemap.xml 打包后会直接出现在 build 文件夹根路径，访问路径和开发环境完全一致，不需要修改业务代码。
如果访问不到，优先排查两个点：

• 确认打包后 build 目录根路径下存在 sitemap.xml：如果没有，说明你的 sitemap 生成脚本执行时机错误，需要将脚本执行逻辑调整到打包操作之前，避免打包时没有带上新生成的文件。
• 确认部署服务的静态资源规则配置正确：以 Nginx 为例，需要确保配置中静态资源的根目录指向 build 文件夹，且没有拦截 .xml 后缀的请求，参考配置如下：

server {
  listen 80;
  root /your/project/path/build;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

配置正确的前提下，直接访问 你的域名/sitemap.xml 即可正常获取文件。

方案2：通过 react-router-dom 路由返回XML内容 #

如果无法修改部署配置，可以用路由动态渲染XML内容，react-router-dom v6 版本的实现步骤如下：

1. 提前把生成好的 sitemap XML 内容保存为字符串，可以直接硬编码在组件中，也可以存为静态文件打包时引入。
2. 配置对应路由的渲染逻辑：

// 路由配置部分
import { Route, Routes } from 'react-router-dom';
import Sitemap from './Sitemap';

function App() {
  return (
    <Routes>
      {/* 你的其他业务路由 */}
      <Route path="/sitemap.xml" element={<Sitemap />} />
    </Routes>
  );
}

// Sitemap 组件实现
import { useEffect } from 'react';

const Sitemap = () => {
  useEffect(() => {
    // 替换为你自己的 sitemap 完整XML内容
    const sitemapStr = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://your-domain.com/</loc>
    <lastmod>2024-01-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>`;

    // 修改文档类型为XML，写入内容
    document.open('application/xml');
    document.write(sitemapStr);
    document.close();
  }, []);

  return null;
};

export default Sitemap;

注意该方案依赖客户端JS执行，部分不执行JS的爬虫无法抓取到sitemap内容，仅作为备选方案使用。

内容的提问来源于stack exchange，提问作者Zeed Tanue