呈现动态站点地图的最佳方式 - 反应答案

【问题标题】：Best way to render the dynamic sitemap - react呈现动态站点地图的最佳方式 - 反应
【发布时间】：2022-09-23 15:35:02
【问题描述】：

我是 React 的初学者，我使用 React 前端制作了一个投资组合网站。

我想为应用程序添加一个动态站点地图，并且几乎尝试了 youtube、stackoverflow 和 google 上给出的所有可能的方式。但是，如果我添加一个新的投资组合，我就不能做我想做的事情，它不会出现在站点地图中。

我已经尝试过的事情：-

起初，我在公用文件夹中添加了一个包含所有静态内容的sitemap.xml 文件，但出现了同样的问题，每次添加作品集时我都必须构建整个应用程序，而且我必须手动更改站点地图。
我还尝试了 react-snap 和 react-snap-sitemap 一起工作，但大多数情况下，我不知道为什么，但 css 停止工作。大多数情况下，它发生在我不想在站点地图中出现或我不希望它们被抓取的页面上。
然后，我还尝试了一种方法，其中有一个 sitemap-generator.js，我们必须运行它才能在 build 文件夹中创建一个 sitemap.xml 文件，但是，我们将不得不一次又一次地构建它，一个更大的问题是它使用了错误的 babel 脚本。
然后我终于发现react-dynamic-sitemap 几乎可以完美运行，但问题是它正在渲染组件Sitemap 而不是文件sitemap.xml。
因此，xml 内容显示为文本。
我还找到了将其显示为 xml 内容的方法，但我无法这样做。
我认为这个站点地图无法提交给谷歌，而且这不是纯粹动态的。
因为，对于投资组合详细信息页面，我必须像这样在 slugs 参数中传递 slugs：[{id: \"foo\"}, {id: \"bar\"}]。我试图从数据库中获取这些，但即使我使用.then()，然后在从服务器获取投资组合数据后加载Routes，它也会给出错误，因为它必须在其他Sitemap组件中加载直到那时.

`react-dynamic-sitemap`的代码：-

站点地图.js

import React from \"react\";
import Routes from \"./Routes\";
import DynamicSitemap from \"react-dynamic-sitemap\";

export default function Sitemap(props) {
    return (
        <DynamicSitemap routes={Routes} prettify={true} {...props}/>
    );
}

路由.js

import React, { useContext, useEffect, useState } from \'react\';
import { Route, Routes } from \'react-router-dom\';

import { Portfolio } from \'./PortfolioComponent/Portfolio\';
import { PortfolioDetail } from \'./PortfolioDetailComponent/PortfolioDetail\';
import Sitemap from \'./Sitemap\';

const MyRoutes = () => {
    return (
        <Routes>
            ...Other Static Routes...
            <Route
                path=\"/portfolio\"
                element={<Portfolio />}
                sitemapIndex=\'true\'
                changefreq=\'weekly\'
                priority=\'1\'
            />
            <Route
                path=\"/portfolio/:slug\"
                element={<PortfolioDetail />}
                sitemapIndex=\'true\'
                changefreq=\'weekly\'
                priority=\'1\'
                slugs={[Objects of the slugs of different portfolios have to written staticly]}
            />
            <Route path=\"/sitemap\" element={<Sitemap />}></Route>
        </Routes>
    )
}

export default MyRoutes;

有人可以回答这些问题吗？结束所有 React 开发人员的问题:-

在 react 中静态生成站点地图的最佳方法是什么，正如许多解决方案所说的使用 nextjs 或使用在线站点地图生成器
如果没有其他办法，我们如何将react-dynamic-sitemap 内容渲染为xml

标签： reactjs sitemap

【解决方案1】：

如果我没记错的话，您使用的是 Create React App (CRA)，对吗？

老实说，CRA 很容易上手，但是当您扩大规模并需要更高级的功能（例如图像优化、站点地图生成、SEO 等）时，您可能已经注意到，您会开始发现它有问题。

由于您想要一个站点地图，这表明您的站点开始增长到合适的大小，而不是挖兔子洞，我建议您转向更具可扩展性的框架，Next.js 是最受欢迎的框架之一。

话虽如此，请注意，即使 Next.js 也没有对站点地图的原生支持。大多数人只依赖next-sitemap，但它被证明是一个强大的解决方案

【讨论】：

我已经尝试过的事情：-

react-dynamic-sitemap的代码：-

`react-dynamic-sitemap`的代码：-