React Router部署至Apache服务器后路由跳转404问题排查

生产环境子路由跳转404是典型的单页应用history路由配置不匹配问题，开发环境下webpack dev server自带路径回退逻辑所以运行正常，生产环境静态服务器没有正确把路由请求转发到入口html文件，叠加路径配置不一致，就会出现首页能访问、子路径全404的问题。按以下步骤逐一修复即可：

1. 替换原生跳转标签 #

不要用原生<a>标签做站内路由跳转，会触发整页刷新，直接绕开React Router逻辑。换成react-router-dom提供的Link组件，路径写相对路由即可：

import { Link } from 'react-router-dom';

// 替换原有的a标签
<Link to="/subpage">Click Here for Sub Page</Link>

2. 修正.htaccess重写规则 #

你当前的重写规则路径写死有问题，先确认.htaccess文件的存放位置：

• 如果.htaccess放在部署目录mywebpage的根目录下（和index.html同层级），替换为以下规则：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

• 如果.htaccess放在服务器网站根目录，替换为以下规则：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^mywebpage/(.*)$ /mywebpage/index.html [QSA,L]

• 新增的!-d规则是排除实体目录请求，避免把真实存在的目录请求也转发到index.html。

3. 对齐package.json的homepage配置 #

你当前站点实际部署在/mywebpage子路径下，homepage字段要和实际部署的公开路径匹配，修改为：

"homepage": "/mywebpage",

如果配置了反向代理，访问http://mywebpage.com时地址栏不显示/mywebpage后缀，就把homepage字段值改为"."即可。

4. 修正Router的basename配置 #

basename参数必须以斜杠开头，否则路由匹配会异常：

• 访问地址带/mywebpage后缀（即http://mywebpage.com/mywebpage）的场景，把Router配置改为：

<Router basename="/mywebpage">

• 反向代理场景地址栏不带/mywebpage后缀的，直接删除basename属性即可。

所有配置改完后重新执行yarn build，把新生成的build目录文件上传到对应部署目录，清空浏览器缓存后再测试跳转即可。

内容的提问来源于stack exchange，提问作者Jordan Anthony