Question

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

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

我已将主页设置为http://www.example.com/myproject中的packages.json（已尝试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中描述的dev和prod环境配置不同的相对路径，但首先我只需要让它在部署中工作。

Answer 1

问题：在服务器端评估URL

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

解决方案

如果您可以控制服务器，则可以为所有路由提供index.html。 create react app documentation serving apps with client side routing中对此进行了解释。由于我们在GitHub页面上没有这种控制权，我们可以试试这些。

简易解决方案

从browserHistory切换到hashHistory 通过此更改，您的网址将显示为

www.example.com/myproject/account

到

www.example.com/myproject /＃/帐户

所以它有点乱。

更难解决方案

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

创建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

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

2 个答案:

问题：在服务器端评估URL

解决方案