我正在尝试将 create-react-app 部署到具有自定义域的 GitHub 页面上的相对路径。例如。www.example.com/myproject
我在用着react-router-dom, react-router-redux and react-router-bootstrap
我已将主页设置为http://www.example.com/myproject in packages.json (tried 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）或者如果我在子页面上刷新浏览器。
长期目标是为开发和生产环境配置不同的相对路径，如中所述这个答案 https://stackoverflow.com/a/42825400/4006001但首先我只需要让它在部署中工作。
问题：URL 在服务器端进行评估
当您在浏览器的地址栏中输入新的 URL 或刷新页面时，浏览器会向服务器（在本例中为 GitHub Pages 服务器）请求该 URL。此时，客户端路由器（react-router）无法采取行动，因为它尚未为该页面加载。现在服务器寻找匹配的路由/accounts找不到它（因为路由是在客户端完成的）并返回404.
Solution
如果您可以控制服务器，则可以提供服务index.html对于所有路线。
创建反应应用程序文档对此进行了解释通过客户端路由为应用程序提供服务 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing。
由于我们在 GitHub 页面上没有这种控制权，因此我们可以尝试这些。
简单的解决方案
切换自browserHistory to hashHistory通过此更改，您的 URL 将不再是这样
www.example.com/myproject/account
to
www.example.com/myproject/#/account
所以有点乱。
更难的解决方案
获取要重定向到的 GitHub 页面index.html根据所有要求。基本上你必须添加一个404.html在您的构建目录中，其中包含要重定向到的代码index.html. 更多关于如何做到这一点的信息 https://github.com/rafrex/spa-github-pages.
创建 React App 有GitHub 页面中有关客户端路由的文档 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#notes-on-client-side-routing too
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
