使用react-router-sitemap生成站点地图时遇JSX语法错误求助

一、修复当前JSX语法错误 #

你遇到的问题是@babel/register未配置React预设，无法转译JSX语法，同时路由包引入路径有误，按以下步骤修复：

1. 安装必要依赖 #

执行命令安装Babel相关工具：

npm install --save-dev @babel/core @babel/preset-react @babel/register

2. 配置Babel转译规则 #

在项目根目录创建.babelrc文件，添加React预设：

{
  "presets": ["@babel/preset-react"]
}

或者直接在sitemap-builder.js中配置@babel/register：

require("@babel/register")({
  presets: ["@babel/preset-react"],
  extensions: [".jsx", ".js"]
});

// 修正包引入路径，react-router-sitemap在node_modules中
const router = require("./router").default;
const Sitemap = require("react-router-sitemap").default;

// 将生成的sitemap放到public目录，部署后可直接访问
new Sitemap(router).build("https://mysite.com").save("./public/sitemap.xml");

二、适配React Router v6的更优方案 #

react-router-sitemap对v6的JSX路由支持不佳，推荐用纯对象路由配置复用路由规则，同时避免JSX解析问题：

1. 创建纯对象路由配置 #

在src下新建routes.config.js：

// 统一的路由配置，既给React Router用，也给sitemap生成用
module.exports = {
  routes: [
    { path: "/" },
    { path: "/about" },
    { path: "/resources" }
  ]
};

2. 更新router.jsx使用配置 #

import React from "react";
import { Routes, Route } from "react-router";
import { routes } from "./routes.config";

export default (
  <Routes>
    {routes.map((route, idx) => (
      <Route key={idx} path={route.path} />
    ))}
  </Routes>
);

3. 简化sitemap生成脚本 #

修改sitemap-builder.js，直接使用纯对象配置，无需转译JSX：

const { routes } = require("./routes.config");
const Sitemap = require("react-router-sitemap").default;

new Sitemap(routes).build("https://mysite.com").save("./public/sitemap.xml");

三、更优的站点地图生成方式 #

1. 动态路由处理：如果有/:postId这类动态路由，需从接口或数据库获取实际ID列表，拼接成完整URL添加到sitemap：

// 示例：假设从API获取文章ID
const postIds = ["1", "2", "3"];
const dynamicRoutes = postIds.map(id => `/posts/${id}`);
const allRoutes = [...routes.map(r => r.path), ...dynamicRoutes];

new Sitemap(allRoutes).build("https://mysite.com").save("./public/sitemap.xml");

2. 集成到构建流程：在package.json的scripts中添加生成命令，每次构建自动生成：

"scripts": {
  "build": "react-scripts build && node src/sitemap-builder.js"
}

3. 替代方案：如果react-router-sitemap兼容性问题仍存在，可自行编写简单脚本遍历路由配置生成XML，或使用轻量工具直接拼接sitemap内容。

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