获取 404 以获取将 create-react-app 部署到 github 页面的链接

Posted 2023-02-21

【中文标题】获取 404 以获取将 create-react-app 部署到 github 页面的链接

【英文标题】：getting 404 for links with create-react-app deployed to github pages

【发布时间】：2018-02-13 20:01:59

【问题描述】：

我正在尝试将 create-react-app 部署到具有自定义域的 GitHub 页面上的相对路径。例如。 www.example.com/myproject

我正在使用react-router-dom、react-router-redux 和 react-router-bootstrap

我已在packages.json 中将主页设置为http://www.example.com/myproject（也尝试过homepage = "."），并为我的历史配置了基本名称：

...
export const history = createHistory( basename: '/myproject' );
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

部署的应用程序在www.mydomain.com/myproject 上运行，我可以通过应用程序链接进行导航。

但是当我尝试直接输入路径（例如www.example.com/myproject/account）或在子页面上刷新浏览器时，我得到了 404。

长期目标是为 dev 和 prod 环境配置不同的相对路径，如 this answer 中所述，但首先我只需要使其在部署中工作。

【问题讨论】：

你需要一个服务器端脚本来为你处理路由，例如用相同的 index.html 响应所有端点

【参考方案1】：

问题：URL 在服务器端被评估

当您在浏览器的地址栏中输入新 URL 或刷新页面时，浏览器会请求该 URL 的服务器（在本例中为 GitHub 页面服务器）。此时，客户端路由器（react-router）无法采取行动，因为它尚未为该页面加载。现在服务器寻找匹配/accounts的路由不会找到它（因为路由是在客户端完成的）并返回404。

解决方案

如果您可以控制服务器，则可以为所有路由提供index.html。 这在创建反应应用程序文档serving apps with client side routing 中有解释。 由于我们在 GitHub 页面的情况下没有这种控制，我们可以尝试这些。

简单的解决方案

从browserHistory 切换到hashHistory 通过此更改，您的 URL 将不再看起来像

www.example.com/myproject/account

到

www.example.com/myproject/#/account

所以有点乱。

更难的解决方案

让 GitHub 页面在所有请求中重定向到 index.html。基本上你必须在你的构建目录中添加一个404.html，并使用代码重定向到index.html。 More on how to do that.

Create React App 也有documentation around client-side routing in GitHub pages

【讨论】：

谢谢。我终于找到了一条部署到 netlify 的路线。使用 netlify，我只需将 _redirects 文件添加到根文件夹中，无需破解 :)

@szerte 你能把问题的标题改成 `getting 404 on hit routes in GitHub pages 之类的吗？它可以帮助有类似问题的人轻松找到它。

这个链接有一些很好的建议link。对我有用的是HashHistory。

谢谢。通过使用 HashRouter 而不是 BrowserRouter 我的问题解决了，现在每个 URL 都可以从外部访问。 reacttraining.com/react-router/web/api/HashRouter

谢谢。只需将 BrowserRouter 替换为 HashRouter 即可解决我的问题。

【参考方案2】：

原因是浏览器可能还没有缓存路由代码，所以如果你去索引以外的路由会导致404错误。

如果有人正在使用 ZEIT Now 进行部署，请注意（尽管 gh-pages 会类似）；我设法（经过一段时间）弄清楚如何解决它。这有点费力，所以我决定为其他遇到困难的人写一篇关于它的文章。

https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb

【讨论】：

我关注了您的文章，结果就是这样 -> 'now' 未被识别为内部或外部命令、可运行程序或批处理文件。错误命令失败，退出代码为 1。

【参考方案3】：

解决此问题的最佳方法是创建 index.html 的副本并将其命名为 404.html 用于生产构建。要将其添加到 package.json 脚本中：

"build": "react-scripts build && cp build/index.html build/404.html"