使用React HashRouter时如何去除URL中的static/index.html路径

云原生阿岚

2026-10-6

解决方案

你可以通过配置IIS URL重写规则+调整React打包配置实现需求，全程不需要修改现有路由逻辑，也不影响后端/api路径的接口调用：

前置准备

确保你的IIS 10已经安装URL重写模块，可直接通过IIS管理器自带的平台安装程序搜索安装。

步骤1：调整IIS重写规则

删除原有主域名重定向到/static/index.html的3xx跳转规则，在站点根目录的web.config文件中添加如下规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 规则1：api路径请求直接透传给后端，不重写 -->
        <rule name="API Passthrough" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="None" />
        </rule>
        <!-- 规则2：静态资源请求内部重写到static文件夹 -->
        <rule name="Static Assets Rewrite" stopProcessing="true">
          <match url="^.*\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$" />
          <action type="Rewrite" url="/static/{R:0}" />
        </rule>
        <!-- 规则3：所有其他请求内部重写到static/index.html，地址栏不变 -->
        <rule name="React SPA Rewrite" stopProcessing="true">
          <match url="^.*$" />
          <action type="Rewrite" url="/static/index.html" />
        </rule>
      </rules>
    </rewrite>
    <!-- 保留你原有wfastcgi的相关配置即可 -->
  </system.webServer>
</configuration>

步骤2：修改React打包配置

如果你使用create-react-app脚手架：在项目package.json中添加配置项 "homepage": "/"
如果你自行配置webpack：将output.publicPath字段的值改为/
重新打包前端项目，把新的构建产物替换到服务器的static文件夹中。

步骤3：确认HashRouter配置

检查React项目中HashRouter的定义，确保没有设置basename参数，直接使用默认配置即可：

// 正确示例
<HashRouter>
  {/* 你的路由规则 */}
</HashRouter>

验证效果

配置完成后重启IIS站点，清除浏览器缓存后访问contoso.com，地址栏不会出现/static/index.html后缀，路由跳转后自动生成contoso.com/#home格式的链接，刷新页面、后端接口调用均不受影响。

内容的提问来源于stack exchange，提问作者Kevin Joseph