获取404以将与create-react-app的链接部署到github页面 [英] getting 404 for links with create-react-app deployed to github pages

问题描述

我正在尝试将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-bootux 和 react-router-bootstrap

我在 packages.json中将主页设置为 http://www.example.com/myproject （也尝试过 homepage =。 ），并且还为我的历史记录配置了基本名称：

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.

但是当我尝试直接输入路径时，我得到了404（例如 www.example.com/myproject/account ），或者是否在子页面上刷新浏览器。

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或刷新页面时，浏览器会请求该URL的服务器（在本例中为GitHub页面服务器）。此时，客户端路由器（反应路由器）无法采取行动，因为该页面尚未加载。现在服务器将查找与 / 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 所有路线。
这在创建React应用程序文档通过客户端路由为应用提供服务。
因为在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 hashHistory With this change, your URLs will go from looking like

www.example.com/myproject/account

www.example.com/myproject/account

到

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

这篇关于获取404以将与create-react-app的链接部署到github页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！