如何阻止react-router-sitemap生成重复URL条目？

我之前也碰到过react-router-sitemap生成重复URL的情况，像你示例里的/、/ui这些路径重复出现，确实挺头疼的。给你几个实用的解决思路：

• 检查路由配置，从根源避免重复
  首先排查你的React路由代码，很可能是同一个静态路径被重复定义了。比如在不同的<Route>组件里写了相同的path属性，或者嵌套路由中不小心重复注册了相同路径。确保每个静态路由的path在整个路由树里是唯一的（动态路由带参数的情况除外），这是最彻底的解决方式。

• 生成后手动对URL列表去重
  如果路由配置没法调整，可以在生成sitemap的代码里手动处理结果，利用JavaScript的Set来自动过滤重复项。示例代码如下：

  import { generateSitemap } from 'react-router-sitemap';
  import { router } from './your-router-config';
  
  // 生成原始sitemap数据
  const rawSitemap = generateSitemap(router);
  // 提取所有URL并去重
  const uniqueLocList = [...new Set(rawSitemap.urls.map(item => item.loc))];
  // 重新构建去重后的urls数组
  rawSitemap.urls = uniqueLocList.map(loc => ({ loc }));
  // 输出为XML字符串或者保存到文件
  const finalSitemap = rawSitemap.toString();
  

• 利用工具的自定义过滤功能
  部分版本的react-router-sitemap支持通过自定义过滤函数来筛选路由。你可以在生成时传入一个filter，记录已经处理过的路径，跳过重复项：

  import { generateSitemap } from 'react-router-sitemap';
  import { router } from './your-router-config';
  
  // 创建带记忆功能的过滤函数
  const createUniqueFilter = () => {
    const processedPaths = new Set();
    return (route) => {
      if (processedPaths.has(route.path)) {
        return false;
      }
      processedPaths.add(route.path);
      return true;
    };
  };
  
  // 传入filter生成去重后的sitemap
  const sitemap = generateSitemap(router, {
    filter: createUniqueFilter()
  });
  

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