加载网站目录级页面的问题

Question

我刚刚通过 github 页面部署了我的 create-react-app。当点击进入根域或在浏览器的 URL 地址栏中输入根域时，站点 (jasonclerk.com) 加载正常。但是，如果深度链接到目录级别页面 (jasonclerk.com/about) 或在 URL 地址栏中输入该目录级别页面，我会遇到 404 错误。如果我使用网站内的导航，我可以毫无问题地转到其他页面。

我确实在我的顶级组件中使用了路由（react-router-dom），在本地测试环境中一切正常。此外，之前通过 heroku 部署了该站点，并且对深度链接没有任何问题。现在部署在 ghpages 上，所以我可以添加自定义域。

有什么建议可以解决直接加载目录级页面的问题吗？

Answer 1

react-router 是客户端路由的一个很好的例子。您正面临这个问题，因为 GitHub 页面服务器不知道您正在构建客户端路由应用程序。从服务器的角度来看，它无法识别/about。有两种方法可以解决您的问题。

1. 使用HashRouter 而不是BrowserRouter，URL 最终不会那么漂亮，但由于它使用哈希，您不必在服务器端执行任何特殊操作。

2. 在此处关注guide，为 Github Pages 实施“hacky”解决方案。基本上，您在 404.html 中添加一个脚本（即 GitHub 收到 404 错误时将显示的页面），它将所有请求重定向到您的 index.html。