创建一个sitemap.xml并将其与在React中捕获所有路由结合

Question

我的应用程序结构是这样

appHeader: <Header activeRoute={props.activeRoute} />,
appRoutes: renderRoutes(props.routes),
appFooter: <Footer activeRoute={props.activeRoute} />,

所以我有页眉，页脚和路由。如果用户尝试访问

https://www.myapp.com或https://www.myapp.com/home，该页面将呈现页眉，页脚和现有路线，但是如果用户尝试访问https://myapp.com/noexist

由于此路由不存在，该站点仍将为该路由呈现页眉，页脚和自定义404页面。这是反应路由器4中的所有路由。

因此，页眉和页脚将始终呈现。

我的根目录中有一个sitemap.xml。

但是，如果有人访问https://www.myapp.com/sitemap.xml，则该网站还将呈现页眉，页脚和自定义404页面。

当我尝试将站点地图提交到Google Search Console时出现错误

您的文件似乎是HTML页面，我不知道是否是因为我的应用程序结构。

我该如何解决并解决它？