使用react-router-sitemap生成站点地图遇SyntaxError问题求助

问题描述 #

执行npm run sitemap时触发语法错误：

SyntaxError: /Users/maurijnvd/discord_bots/geld-verdienen.nl/src/router.js: Unexpected token (5:2)
  3 | 
  4 | export default (
> 5 |   <Switch>
    |   ^
  6 |   <Route path='/' component={Home}/>
  7 |   <Route path='/10-manieren-om-geld-te-verdienen' component={Verdienen}/>
  8 |   <Route path='/hoe-bepaal-je-de-waarde-van-een-sneaker' component={WaardeBepalen}/>

核心矛盾在于：使用的react-router-dom v6与参考博客的旧版本API不兼容，同时react-router-sitemap对v6支持有限，加上代码配置存在冲突。

解决方案 #

方案一：修复现有配置（适配v6） #

1. 修正router.js文件

解决组件命名冲突与导入错误：

import React from 'react';
// 从react-router-dom导入v6正确组件
import { Routes, Route } from 'react-router-dom';
import Home from './components/pages/Home'
import Verdienen from './components/pages/geld-verdienen'
import WaardeBepalen from './components/pages/sneaker-waarde'
import Page404 from './components/pages/404Page';

// 避免和导入的Routes组件重名，改为AppRoutes
const AppRoutes = () => {
  return (
    <Routes>
      <Route exact path='/' element={<Home/>}/>
      <Route exact path='/10-manieren-om-geld-te-verdienen' element={<Verdienen/>}/>
      <Route exact path='/hoe-bepaal-je-de-waarde-van-een-sneaker' element={<WaardeBepalen/>}/>
      <Route path='*' element={<Page404/>}/>
    </Routes>
  )
}
export default AppRoutes

2. 更新Babel配置

安装缺失的React预设：

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

修改sitemap-builder.js的Babel注册配置：

require("@babel/register")({
  presets: ["@babel/preset-env", "@babel/preset-react"]
});
const router = require('./router').default;
const Sitemap = require('react-router-sitemap').default;

new Sitemap(router)
  .build("https://geld-verdienen.nl") // 替换为你的实际域名
  .save('./public/sitemap.xml');

3. 兼容性说明

react-router-sitemap长期未维护，对v6支持有限，若修改后仍报错，建议切换方案。

方案二：使用更适配v6的生成方式 #

方法1：手动生成静态站点地图

直接在public目录创建sitemap.xml，手动添加所有路由：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://geld-verdienen.nl/</loc>
    <lastmod>2024-05-20</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://geld-verdienen.nl/10-manieren-om-geld-te-verdienen</loc>
    <lastmod>2024-05-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://geld-verdienen.nl/hoe-bepaal-je-de-waarde-van-een-sneaker</loc>
    <lastmod>2024-05-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

方法2：使用react-sitemap-generator

安装工具：

npm install react-sitemap-generator --save-dev

创建generate-sitemap.js脚本：

const SitemapGenerator = require('react-sitemap-generator');

const generator = new SitemapGenerator('https://geld-verdienen.nl', [
  '/',
  '/10-manieren-om-geld-te-verdienen',
  '/hoe-bepaal-je-de-waarde-van-een-sneaker'
], {
  filePath: './public/sitemap.xml',
  lastMod: true,
  changeFreq: 'weekly',
  priority: 0.8
});

generator.start();

在package.json的scripts中添加：

"sitemap": "node src/generate-sitemap.js"

执行npm run sitemap即可生成。

内容的提问来源于stack exchange，提问作者maurijn.vd