具有自定义域的 Github Pages 登陆页面是正确的，但其他页面出现 404

Question

已解决：

1. Github Pages 不喜欢

   <BrowserRouter>

   ，必须更改为

   <HashRouter> 

2. homepage

   中的

   package.json

   必须包含

   #

这里总结了更好的答案：React Router 无法与 Github Pages 一起使用

---

我已成功将我的 React 项目部署到具有自定义域的 Github Pages（例如 www.mywebsite.com）。我将

mywebsite.com

作为主页，其他页面（如“关于”）可通过

mywebsite.com/about

访问。虽然主页工作正常，但该自定义域的“关于”页面会导致 404。

我已经在 Github 端正确设置了所有内容（CNAME 有 mywebsite.com，package.json 将

homepage

设置为 mywebsite.com，部署后我等待了 24 小时以确保它不是 DNS问题）。这位于存储库中

my-repo

奇怪的是，在本地，一切都进展顺利。当我

npm start

并转到

localhost:3000

时，我会点击主页，当我转到

localhost:3000/about

时，我会点击关于页面。

但是部署到

gh-pages

分支后，该分支会发布到

username.github.io/my-repo

，而不是自动发布到

mywebsite.com

，即使我之前已将

mywebsite.com

放入自定义域部分。如果我转到

username.github.io/my-repo

，我会得到一个空白页面 - 而不是 404。

然后，如果我再次将

mywebsite.com

放入自定义域字段并转到

mywebsite.com

，我可以转到主页，并且关于页面有 404。

我在 Github 文档中发现了一些可能相关的有趣内容：

如果您能够访问您的目标网页，但始终遇到损坏的链接，则可能是因为您之前没有自定义域名，或者正在从自定义域名恢复过来。在这种情况下，更改路由路径不会启动页面的重建。推荐的解决方案是确保您的网站在添加或删除自定义域名时自动重建。这可能涉及配置提交作者和修改自定义域名设置。

但我不确定解决方案是什么。

回顾一下，

1. 有什么想法可以解释为什么在本地我可以导航到“关于”页面，但是一旦我将其部署到 gh-pages，就会出现 404 错误？
2. 关于 Github 文档，如何在添加自定义域时自动构建站点？

Answer 1

理想情况下，您应该使用类似 https://vercel.com/new 的内容来托管 React.js/Next.js 项目 方法和原因如下：

1. 您使用您的 Github 帐户登录 vercel
2. 单击“添加新”->“项目”
3. 由于这是您第一次使用 Vercel，因此您必须授予其访问您的项目的权限
4. 您只需点击“导入”即可
5. 完成后，您就可以部署它了。
6. 现在，每次您向主分支提交时，vercel 都会使用最近的代码重新部署您的网站。