我在单页 Web 应用程序中使用 React 和 React Router。因为我在做客户端渲染，所以我想用 CDN 来提供我所有的静态文件(HTML、CSS、JS)。我使用 Amazon S3 来托管文件，并使用 Amazon CloudFront 作为 CDN。
当用户请求/css/styles.css 时，该文件存在，因此 S3 提供它。 当用户请求/foo/bar 时，这是一个动态 URL，因此 S3 添加了一个 hashbang:/#!/foo/bar。这将服务于 index.html。在我的客户端，我删除了 hashbang，所以我的 URL 很漂亮。
这对我 100% 的用户来说都很好。
- 所有静态文件都通过 CDN 提供
- 动态 URL 将被路由到/#!/{...} 服务于 index.html(我的单页应用程序)
- 我的客户端删除了 hashbang，因此 URL 又漂亮了
问题
问题是 Google 不会抓取我的网站。原因如下:
- Google 请求/
- 他们看到一堆链接，例如到/foo/bar
- Google 请求/foo/bar
- 他们被重定向到/#!/foo/bar (302 Found)
- 他们删除了 hashbang 并请求/
为什么要删除 hashbang？我的应用程序对 100% 的用户都非常有用，那么为什么我需要以这种方式重新设计它才能让 Google 正确抓取它？现在是 2016 年，就跟着 hashbang...
我做错了什么吗？有没有更好的方法让 S3 在无法识别路径时为 index.html 提供服务？
设置节点服务器来处理这些路径并不是正确的解决方案，因为这违背了拥有 CDN 的全部目的。
In this thread React Router 的主要贡献者 Michael Jackson 说:“谢天谢地，hashbang 不再被广泛使用。”你会如何更改我的设置以不使用 hashbang？
最佳答案
您还可以查看此 trick .您需要设置云端分发，然后在分发的“错误页面”部分更改 404 行为。这样你就可以再次 domain.com/foo/bar 链接 :)
关于amazon-s3 - React Router + AWS 后端，如何做 SEO，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35664870/