如何通过IIS重写规则移除URL哈希适配React路由迁移？

问题根因 #

你之前的IIS重写规则无效的核心原因是：URL中的#（哈希片段）是浏览器端的内容，不会被发送到服务器，所以IIS的URL重写模块根本接收不到这部分内容，自然匹配不到(.*)#(.*)这样的规则。

解决方案 #

1. 前端处理旧哈希URL重定向（唯一可行的方案）

在React应用的入口文件（比如index.js或App.js）中添加初始化检测代码，当用户访问带哈希的旧URL时，前端自动重定向到无哈希的新URL：

// 在React应用渲染前执行
if (window.location.hash.startsWith('#/')) {
  // 截取#后面的路径（去掉#/）
  const newPath = window.location.hash.slice(2);
  // 用replace避免在浏览器历史中留下旧URL记录
  window.location.replace(`${window.location.origin}/${newPath}`);
}

2. 配置Browser Router必备的IIS重写规则

为了确保新的无哈希URL在刷新或直接访问时不会出现404，需要添加将所有非文件/目录请求转发到React入口index.html的规则：

<rule name="React Browser Router" 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>

说明 #

• 前端重定向是处理旧哈希URL的唯一有效方式，因为服务器根本无法获取到哈希片段。
• 先部署Browser Router的服务器规则，确保新URL能正常访问，再添加前端重定向代码处理旧链接。

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