React构建生成Sitemap时API数据异步未等待问题求助

• GetRoutes.js里的getAllPages是异步函数，调用后不会阻塞后续代码执行，导致导出的allPages还是初始的undefined。此时sitemapBuilder.js已经开始生成sitemap，自然拿不到动态路由数据。

1. 改造GetRoutes.js，导出异步获取路由的函数 #

删掉不必要的React导入，直接导出返回路由数组的异步函数：

import axios from 'axios';

export const getAllPages = async () => {
  const res = await axios.get(`url`);
  return res.data.data.map(page => `/${page?.slug}`);
};

2. 修改sitemapBuilder.js，等待异步数据返回后再生成sitemap #

把生成逻辑包裹在异步函数中，确保拿到动态路由后再构建路由组件、生成sitemap：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Generator from 'react-router-sitemap-generator';
import { getAllPages } from './GetRoutes';

const generateSitemap = async () => {
  const allPages = await getAllPages();
  console.log('=>', allPages); // 现在能获取到正确的动态路由数据

  const AllRoutes = () => {
    return (
      <Switch>
        <Route path="/" />
        <Route path="/about" />
        <Route path="/contact" />
        <Route path="/blog" />
        {allPages.map(page => (
          <Route key={page} path={page} />
        ))}
      </Switch>
    )
  };

  const generator = new Generator('url', AllRoutes(), {
    lastmod: new Date().toISOString().slice(0, 10),
    changefreq: 'monthly',
    priority: 0.8,
  });

  generator.save('public/sitemap.xml');
};

generateSitemap();

3. 调整package.json脚本，确保执行顺序 #

修改build:staging脚本，用&&保证sitemap生成完成后再执行构建：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "build:staging": "env-cmd -f ./.env.staging npm run sitemap && react-scripts build",
  "sitemap": "babel-node ./src/utils/sitemapBuilder.js"
},

• await getAllPages()会等待API请求完成，拿到动态路由数据后再继续执行sitemap生成逻辑，解决了异步时序问题。
• 脚本中的&&确保只有sitemap生成完成，才会启动构建流程，满足“构建前生成包含动态路由的sitemap”的需求。

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