反应应用程序的 XML 站点地图答案

【问题标题】：XML sitemap for react app反应应用程序的 XML 站点地图
【发布时间】：2017-07-11 22:53:12
【问题描述】：

我有一个 React 应用程序，我想为其添加一个 sitemap.xml。我已添加此路由以链接到文件（XML 是我的我的 sitemap.xml）：

import XML from './sitemap.xml';    
<Route component={XML} path={'/sitemap.xml'} />

我不断收到这个错误，我知道这意味着我需要向我的 webpack 添加一个 xml 加载器：

You may need an appropriate loader to handle this file type.

不确定如何选择 xml 加载器，因为我主要可以找到解析器（xml 到 json），我不确定是否可以在 json 中使用站点地图。另外，有没有其他的原生方式来显示xml文件而不添加任何加载器？

【问题讨论】：

标签： reactjs xml xml-sitemap

【解决方案1】：

如果您使用 create-react-app，只需将您的 XML 文件放入 public 文件夹（node_modules 和 src 文件夹旁边的文件夹），然后通过{base_url}/{XML_file_name.xml} 访问它（例如localhost:3000/sitemap.xml）

【讨论】：

我认为这是正确的答案。简单明了！
在 localhost 上，我的 sitemap.xml 可以通过 localhost:3000/sitemap,XML 访问，但是当我将此应用程序部署到 AWS amplify 时，无法通过 {baseURL}/{sitemap.xml} 访问它有什么建议吗？跨度>
对于放大，您需要添加重定向规则，docs.aws.amazon.com/amplify/latest/userguide/redirects.html

【解决方案2】：

在中，关键字组件应该是一个 React 组件。

查看文档：Route - React Router

如果您想将 XML 作为变量传递，您应该将 XML 格式更改为字符串并使用另一个属性，但 component={}。要将 XML 转换为字符串，请在传递给 Route 之前 escape(XML)！检查escape(str)

加上import关键字，你可以这样试试：

// file: get-xml.js
let transformXMLToString = () => {

  // read the target XML fiel and transform it to String
  
  // return the string
  return XMLasString;
};

export transformXMLToString;

// then you could import the XML like this in another file:

import transformXMLToString from 'get-xml.js';

// then pass it to <Route> like:

<Route component={transformXMLToString()}/>

【讨论】：

对不起，我不确定这是如何完成的。我已经用我导入 xml 的方式更新了路线，以防您可以帮助解决该行，或者任何可以帮助解决此问题的链接？
我的意思是尝试将 XML 转换为字符串类型并作为字符串传递给 Route，然后将字符串转换回 XML 类型！ @aiiwa
好吧，按照建议尝试了逃逸（尽管它被记录为已弃用），但它没有用。
以及为什么将 XML 传递给 Route 为 component={XML} ？
在<Route path="/" component={App}> 中，关键字component 应该是一个React 组件。

【解决方案3】：

一个简单的解决方案是添加 <a href="XML_PATH" style={{display:"none"}}>xml</a> 然后检查你的 google chrome 开发控制台，搜索 anchor(a) 标签。并遵循路径

【讨论】：