如何在IIS服务器部署带多路由链接的React应用并解决刷新404问题

你的问题核心在于：React是单页应用（SPA），所有路由都是前端在浏览器内处理的。首次访问时浏览器加载index.html，后续路由跳转由前端接管，但刷新页面时，浏览器会直接向IIS服务器请求对应路径的物理文件，而服务器上根本不存在这些文件，因此返回404。另外，.htaccess是Apache服务器的配置文件，IIS完全不识别，所以这个配置对IIS起不到任何作用。

解决步骤如下：

1. 安装IIS URL重写模块

   • 打开IIS管理器，点击服务器节点，在右侧“管理”区域找到“Web平台安装程序”。
   • 搜索“URL Rewrite”并安装该模块，这是IIS实现URL重写的必要组件。

2. 创建web.config配置文件
   在React打包后的根目录（和index.html同级）创建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" />
             </conditions>
             <action type="Rewrite" url="/index.html" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>
   

3. 适配子应用部署场景
   如果你的React应用部署在IIS的子虚拟目录下（比如http://localhost/my-react-app），需要把<action>标签里的url改成对应路径，示例：

   <action type="Rewrite" url="/my-react-app/index.html" />
   

配置完成后，重启IIS站点，刷新页面就不会再出现404错误了。

内容的提问来源于stack exchange，提问作者Rishika Chowdary