react-router-dom移动端刷新或直接访问子路径返回404错误如何解决

问题根因 #

这是React单页应用客户端路由的典型现象：你当前用的react-router-dom默认是BrowserHistory模式，路由切换逻辑完全在浏览器端执行，只有首次访问首页时才会请求服务端的index.html文件。当你直接访问子路径、或者在子路径页面刷新时，浏览器会直接把当前子路径发给服务端请求资源，但你的服务端没有配置对应子路径的返回规则，就会返回404错误。而从首页点击菜单切换是走的客户端路由，没有触发服务端请求，所以不会报错。

修复方案 #

方案1：配置服务端 fallback（推荐，URL格式更美观） #

只需要让服务端收到任意路径的请求时，都返回你React应用的index.html文件，后续路由匹配逻辑会由客户端自动处理，不会影响页面功能。不同服务端的配置示例如下：

• Nginx 配置
  修改站点的Nginx配置文件，调整location规则：

server {
  listen 80;
  server_name kafalovgroup.bg;
  # 替换成你项目打包后dist文件夹的存放路径
  root /usr/share/nginx/react-project; 

  location / {
    # 核心规则：找不到对应资源就返回index.html
    try_files $uri $uri/ /index.html; 
    index index.html index.htm;
  }
}

修改完成后执行nginx -s reload重启Nginx即可生效。

• Apache 配置
  在项目打包后的根目录新建.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>

需要提前开启Apache的rewrite模块。

• 静态托管平台配置
  如果用的是云服务商的静态网站托管服务，直接在平台配置面板里把404错误页指向你的index.html文件即可。

方案2：改用HashRouter（无需改服务端配置，快速修复） #

如果暂时没有服务端修改权限，可以直接替换路由模式为HashRouter，该模式下路由会携带#前缀（例如http://kafalovgroup.bg/#/contacts），所有路由逻辑都在hash段处理，不会发到服务端，自然不会出现404问题。
修改代码如下：

1. 修改react-router-dom的引入语句：

// 原来的引入
// import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
// 替换为
import { HashRouter as Router, Switch, Route, Link } from 'react-router-dom';

2. 其他原有代码不需要任何改动，重新打包部署即可生效。

额外代码优化提示 #

你现有的Route写法存在冗余：同时定义了component属性和子组件，两种写法二选一即可，避免不必要的重复渲染：

// 写法1：只用component属性
<Route exact path="/services" component={Services} />
// 写法2：只用子组件
<Route exact path="/services">
  <Services />
</Route>

内容的提问来源于stack exchange，提问作者Pizhev Racing