问题描述
我正在尝试使用自定义域将 create-react-app 部署到 GitHub 页面上的相对路径.例如.www.example.com/myproject
I'm trying to deploy a create-react-app to a relative path on GitHub pages with a custom domain. E.g. www.example.com/myproject
我正在使用 react-router-dom、react-router-redux 和 react-router-bootstrap
我在 packages.json 中将主页设置为 http://www.example.com/myproject(试过 homepage = "."code> 也是)，并且还为我的历史配置了 basename:
I've set homepage to http://www.example.com/myproject in packages.json (tried homepage = "." too) and also configured basename for my history:
...
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 上运行，我可以通过应用程序链接导航.
The deployed app works on www.mydomain.com/myproject and I can navigate via the app links.
但是当我尝试直接输入路径(例如 www.example.com/myproject/account)或在子页面上刷新浏览器时，我得到了 404.
But I got 404 when I try to enter a path directly (eg. www.example.com/myproject/account) or if I do browser refresh on a subpage.
长期目标是为开发和生产环境配置不同的相对路径，如这个答案中所述，但首先我只是需要让它在部署中工作.
Long term goal is to configure different relative paths for dev and prod environments as described in this answer but first I just need to make it work in deployment.
推荐答案
问题:URL 在服务器端被评估
当您在浏览器的地址栏中输入新 URL 或刷新页面时，浏览器会请求服务器(在本例中为 GitHub pages 服务器)获取该 URL.此时，客户端路由器 (react-router) 无法执行操作，因为它尚未为该页面加载.现在服务器查找与 /accounts 匹配的路由将找不到它(因为路由是在客户端完成的)并返回 404.
Problem: URL gets evaluated on server side
When you enter a new URL into address bar of the browser or refreshes the page, browser requests server (in this case GitHub pages server) for that URL. At this point, client side router (react-router) can't take action as it is not yet loaded for that page. Now server looks for a route that matches /accounts won't find it (because routing is done on client side) and returns 404.
如果您可以控制服务器，则可以为所有路由提供 index.html.这在创建反应应用程序文档 使用客户端路由服务应用.由于我们在 GitHub 页面的情况下没有这种控制，我们可以尝试这些.
If you had control over the server, you can serve index.html for all routes.This is explained in create react app documentation serving apps with client side routing.As we don't have that control in case of GitHub pages, We can try these.
简单的解决方案
从 browserHistory 切换到 hashHistory通过此更改，您的网址将从看起来像
Switch from browserHistory to hashHistoryWith this change, your URLs will go from looking like
www.example.com/myproject/account
到
www.example.com/myproject/#/account
所以有点乱.
更难的解决方案
获取 GitHub 页面以针对所有请求重定向到 index.html.基本上你必须在你的构建目录中添加一个 404.html 代码以重定向到 index.html.更多关于如何做到这一点.
Get GitHub pages to redirect to index.html on all requests. Basically you have to add a 404.html in your build directory with code to redirect to index.html. More on how to do that.
Create React App 有 关于 GitHub 页面中客户端路由的文档 也是
Create React App has documentation around client-side routing in GitHub pages too
这篇关于使用部署到 github 页面的 create-react-app 链接获取 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！