使用托管在 S3 上的 react-router v3 创建-react-app 不能使用“fetch as google”

Posted 2023-02-22

【中文标题】使用托管在 S3 上的 react-router v3 创建-react-app 不能使用“fetch as google”

【英文标题】：Create-react-app with react-router v3 hosted on S3 not working with "fetch as google"

【发布时间】：2018-10-14 06:47:20

【问题描述】：

我目前有一个使用 create-react-app 构建的 React 应用程序，该应用程序使用通过 CloudFront 托管在 S3 上的 react-router v3。该应用程序是托管在其他地方的 php api 的视图。 react-router 设置为使用 browserHistory。

目前我们正在尝试设置应用程序，以便它可以被谷歌抓取，并正在使用谷歌网站管理员工具和“以谷歌方式获取”进行测试。

主页获取没有问题，但任何内部页面甚至无法呈现并返回“未找到”。

当尝试直接导航到新选项卡中的路线时，该网站在控制台中仍然显示 404 错误（但按预期加载页面）。

到目前为止我已经尝试过： 1) 在 googlebot 的入口点导入 babel-polyfill。 2) 设置 CloudFront 错误页面以向 /index.html 发送 404 响应，并带有 200 3）将s3的错误页面设置为index.html

根据我的阅读，谷歌不应该仅仅为了抓取网站而要求服务器端渲染（SEO 不是我们关心的问题），但我在网上找到的其他解决方案似乎都没有解决这个问题。

我是否需要让整个应用程序能够处理 s-s-r，例如：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing，或者我可以尝试其他方法来使页面可抓取，而无需设置任何服务器端？

任何帮助或进一步资源的指导将不胜感激！

【问题讨论】：

这可能是因为您没有启用 HTML5 模式吗？ ***.com/questions/25086832/…

@BalmySoftware 当我查找 html5mode 时，它​​似乎在 URL 中引用了“#”。通过浏览器访问 https:///category/item 之类的内容时，我的 URL 看起来不错，并且按预期工作，但谷歌无法找到任何类似“/category”的页面

【参考方案1】：

我发现解决方案非常简单。在云端分发中，将自定义错误页面设置为将 404 错误转到目标“/”，http 响应为 200。

很多其他人都将它发布为目标为“/index.html”，如果这不起作用，请尝试上述方法。