IIS部署React SPA后嵌套路由直接访问出现空白页如何解决？

核心原因 #

你遇到的嵌套路由空白问题90%以上是静态资源相对路径引用错误导致的：
当前你的重写规则已经能把所有非文件/目录的请求都返回根目录的index.html，但如果React项目的静态资源引用是相对路径，访问/directory/page1这类嵌套路由时，浏览器会以当前路由路径作为基准去请求静态资源，比如原本根路径下的static/js/main.xxxx.js会被请求为/directory/static/js/main.xxxx.js，这个路径不存在，又会被重写规则返回index.html的内容，JavaScript把HTML内容当作脚本执行失败，最终导致页面无报错但空白。

修复步骤 #

第一步：修改React项目静态资源路径配置 #

重新构建前先调整路径配置，确保所有静态资源从站点根路径加载：

• 如果是create-react-app创建的项目，在package.json中添加homepage配置：

  {
    "name": "your-react-project",
    "homepage": "/",
    // 其余配置保持不变
  }
  

• 如果是Vite创建的React项目，修改vite.config.js/vite.config.ts的base配置：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/',
    // 其余配置保持不变
  })
  

配置修改后重新执行npm run build，把新的构建产物上传到IIS站点目录。

第二步：补充完善web.config配置 #

你当前的配置缺少默认文档声明，也可以补充静态资源后缀的排除规则，减少不必要的重写判断，完整配置参考如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration> 
    <system.webServer>
        <!-- 明确站点默认入口为index.html -->
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
            </files>
        </defaultDocument>
        <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" />
                        <!-- 排除所有静态资源后缀，避免重写逻辑判断 -->
                        <add input="{REQUEST_URI}" pattern="\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$" negate="true" />
                    </conditions> 
                    <action type="Rewrite" url="/" /> 
                </rule> 
            </rules> 
        </rewrite>
    </system.webServer> 
</configuration>

配置更新后重启IIS站点，清空浏览器缓存即可正常访问嵌套路由。

验证方法 #

如果修改后仍有问题，打开浏览器开发者工具：

1. 切换到「网络」面板，刷新页面，确认所有js、css资源的请求路径是/static/xxx格式，而非/directory/static/xxx格式
2. 切换到「控制台」面板，查看是否有脚本执行错误，排查是否是React路由本身的配置问题。

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