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

Question

我正在尝试将 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。

长期目标是为开发和生产环境配置不同的相对路径，如 this answer 中所述，但首先我只需要让它在部署中工作。

Answer 1

问题：URL 在服务器端进行评估

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

解决方案

如果您控制了服务器，则可以为所有路由提供服务 index.html。这在 create react app 文档 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

Answer 2

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

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

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

Answer 3

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

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

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

getting 404 for links with create-react-app deployed to github pages

react-router

create-react-app

react-router-redux

问题：URL 在服务器端进行评估

解决方案