Amazon s3 React路由器&x2B；AWS后端，如何搜索引擎优化

我在单页web应用程序中使用React和React路由器。由于我正在进行客户端渲染，所以我希望使用CDN为所有静态文件（HTML、CSS、JS）提供服务。我使用AmazonS3来托管文件，AmazonCloudFront作为CDN

当用户请求/css/styles.css时，该文件存在，因此S3提供该文件。 当用户请求/foo/bar时，这是一个动态URL，因此S3会添加一个hashbang://#/foo/bar。这将提供index.html。在我的客户端，我删除了hashbang，因此我的URL非常漂亮

这一切对我100%的用户都非常有效

• 所有静态文件都通过CDN提供服务
• 动态URL将被路由到/#/{…}它提供index.html（我的单页应用程序）
• 我的客户端删除了hashbang，因此URL又变得漂亮了

问题

问题是谷歌不会抓取我的网站。原因如下：

• 谷歌请求/
• 他们看到一堆链接，例如指向/foo/bar的链接
• 谷歌请求/foo/bar
• 他们被重定向到/#/foo/bar（找到302个）
• 他们删除hashbang并请求/

为什么要删除hashbang？我的应用程序对我100%的用户来说都很好，那么为什么我需要重新设计它才能让谷歌正确地抓取它呢？现在是2016年，请跟随hashbang

我做错什么了吗？有没有更好的方法让S3在无法识别路径时提供index.html

设置一个节点服务器来处理这些路径不是正确的解决方案，因为这违背了拥有CDN的全部目的

---

React Router的头号撰稿人迈克尔·杰克逊（Michael Jackson）表示，“谢天谢地，hashbang已不再被广泛使用。”你如何改变我的设置，使其不使用hashbang？

当你想创建一个SEO友好的网站时，不建议使用hashbang，即使该网站在谷歌中建立了索引，该页面也只会显示很少的内容

最好的方式做你的网站是通过使用最新的趋势和技术，这是“渐进式网络增强”在谷歌上搜索它，你会发现很多关于它的文章

主要是你应该为每个页面做一个单独的链接，当用户点击任何页面时，他将被重定向到这个页面，使用任何你想要的效果，甚至是单页网站

在这种情况下，谷歌将有一个独特的链接为每个页面，用户将有花哨的效果和伟大的用户体验

例：

您也可以查看这个。您需要设置cloudfront发行版，然后在发行版的“错误页面”部分更改404行为。通过这种方式，您可以再次访问domain.com/foo/bar链接：）

我知道这已经有几个月了，但是对于遇到相同问题的任何人，您只需在S3中指定“index.html”作为错误文档。错误文档属性可以在bucket属性=>静态网站托管=>启用网站托管下找到

请记住，采用这种方法意味着您将负责处理自己的应用程序中的Http错误（如404）以及其他Http错误

<a href="http://www.example.com/contact-us" onclick="fancyEffects();">Contact Us</a>