ReactJS部署IIS服务器后刷新页面出现404错误求助

React单页应用（SPA）依赖前端路由管理页面跳转，刷新页面时浏览器会直接向IIS请求对应路径的物理文件，但该路径下不存在实际资源，因此触发404错误。以下是两种可行的解决方案：

方案1：配置URL重写模块（推荐） #

这是生产环境最常用的解决方式，通过IIS的URL重写规则将所有非文件/目录的请求转发到React的入口文件index.html。

1. 安装URL重写模块
   打开IIS管理器，在右侧“管理”区域点击“Web平台安装程序”，搜索并安装URL Rewrite模块。

2. 添加web.config配置
   在React项目的部署目录（即build文件夹）中创建或编辑web.config文件，写入以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> <!-- 若有后端API接口，需排除对应路径 -->
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
  </system.webServer>
</configuration>

该规则会将所有非文件、非目录、非API的请求重定向到根目录的index.html，由React前端路由处理页面跳转。

方案2：改用HashRouter #

如果不想配置IIS模块，可以修改React项目的路由模式，用HashRouter替代BrowserRouter。这种方式会在URL中添加#前缀（如/#/about），刷新时浏览器不会向服务器请求该路径，直接由前端路由解析。

修改代码示例：

// 原代码（BrowserRouter）
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 修改后（HashRouter）
import { HashRouter as Router, Routes, Route } from 'react-router-dom';

注意：此方法会导致URL带有#符号，对SEO有一定影响，适合对URL美观度要求较低的场景。

额外检查项 #

• 确认React项目已正确构建：执行npm run build，将生成的build文件夹内容部署到IIS站点。
• 检查IIS站点的物理路径是否指向build文件夹，且已给IIS_IUSRS用户分配读取权限。

内容的提问来源于stack exchange，提问作者Abbas J