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

Question

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

我使用react-router-dom，react-router-redux并react-router-bootstrap

我已经将主页设置为http://www.example.com/myprojectin 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 。

长期目标是按照此答案中的描述为开发环境和产品环境配置不同的相对路径，但首先我只需要使其在部署中工作即可。

Answer 1

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

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

Answer 2

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

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

解

如果您控制服务器，则可以为index.html所有路由服务。创建响应应用程序文档（通过客户端路由为应用程序提供服务）中对此进行了说明。因为在GitHub页面的情况下我们没有该控件，所以我们可以尝试一下。

简易解决方案

从切换browserHistory到hashHistory 。进行此更改后，您的网址将从

www.example.com/myproject/account

至

www.example.com/myproject/#/account

所以有点混乱。

更难的解决方案

获取GitHub页面以重定向到index.html所有请求。基本上，您必须404.html在构建目录中添加一个带有代码的目录以重定向到index.html。有关如何执行此操作的更多信息。

Create React App 在GitHub页面上也有关于客户端路由的文档