我正在尝试将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上运行,我可以通过应用程序链接进行导航。
但是当我尝试直接输入一个路径时,我得到了404 (例如,www.example.com/myproject/account),或者在子页面上执行浏览器刷新。
长期目标是为开发和生产环境配置不同的相对路径,如this answer中所述,但首先我只需要让它在部署中工作。
发布于 2017-09-06 02:11:10
问题: URL在服务器端进行计算
当您在浏览器的地址栏中输入新的URL或刷新页面时,浏览器会向服务器(在本例中为GitHub pages服务器)请求该URL。此时,客户端路由器(react- router )无法执行操作,因为它尚未为该页面加载。现在,服务器查找与/accounts匹配的路由,不会找到它(因为路由是在客户端完成的),并返回404。
解决方案
如果您能够控制服务器,则可以为所有路由提供index.html服务。在create react应用程序文档serving apps with client side routing中对此进行了解释。因为我们在GitHub页面中没有这种控制,所以我们可以尝试这些。
Easy Solution
使用此更改从browserHistory切换到hashHistory,您的URL将从如下所示
www.example.com/myproject/account
至
帐户www.example.com/myproject/#/
所以它有点乱。
Harder解决方案
获取所有请求时重定向到index.html的GitHub页面。基本上,您必须使用重定向到index.html的代码在您的构建目录中添加一个404.html。More on how to do that。
创建React应用程序也有documentation around client-side routing in GitHub pages
发布于 2021-10-27 20:07:21
解决这个问题的最好方法是创建index.html的副本,并将其命名为404.html用于生产构建。要将其添加到package.json脚本中,请执行以下操作:
"build": "react-scripts build && cp build/index.html build/404.html"发布于 2018-02-16 08:09:37
原因是浏览器可能尚未缓存路由代码,因此如果您转到索引以外的路由,则会导致404错误。
旁注:如果有人正在使用ZEIT Now进行部署(尽管gh-pages会很相似);我设法(经过一段时间后)解决了这个问题。这是一个小小的努力,所以我决定写一篇关于它的文章,供其他被卡住的人参考。
https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb
https://stackoverflow.com/questions/46056414
复制相似问题