Apache本地服务器部署React应用 路由刷新/直接访问404问题

React Router 属于客户端路由，路由匹配、页面切换的逻辑全部在浏览器端执行，和服务端无关：

• 你在已经加载好的React应用里点内部链接跳转到/test时，浏览器不会向Apache发送对应/test路径的页面请求，只是React Router修改了内存里的路由状态，渲染了/test匹配的组件，同时通过浏览器History API更新了地址栏显示的URL，整个过程没有触发整页刷新，所以看起来访问正常。
• 当你直接在地址栏输入/test回车、或者在/test路径下刷新页面时，浏览器会直接向Apache发起请求，索要/test路径对应的服务端资源。但React打包后的产物只有根目录下的index.html是入口文件，Apache在对应路径下找不到/test对应的实体文件或目录，就会直接返回404错误，这时候React应用的代码根本没机会加载，自然页面全部加载失败。

核心逻辑是配置Apache的路由重写规则：所有请求只要不是指向服务器上真实存在的静态文件（JS、CSS、图片等），都统一返回根目录的index.html入口文件，之后交给React Router在客户端完成路由匹配和页面渲染。
具体操作步骤：

• 第一步：开启Apache的重写模块。找到Apache配置目录下的httpd.conf文件，找到被注释的LoadModule rewrite_module modules/mod_rewrite.so行，删除行首的#注释符；再找到对应站点目录的AllowOverride配置项，将值从None改为All，保存配置后重启Apache服务。
• 第二步：在React打包产物的根目录（和index.html同级的位置），新建名为.htaccess的配置文件，写入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

配置完成后再测试：直接访问/test、或者在/test路径刷新时，Apache会正常返回index.html，React应用加载完成后会自动匹配当前路径渲染对应页面，故障即可解决。

内容的提问来源于stack exchange，提问作者Debabratta Jena