基于Create-React-App的React应用部署IIS后空白页问题求助

以下是针对性的排查和解决步骤：

• 修正React Router的basename配置
  当package.json中设置"homepage": "."时，React Router需要匹配相对路径，需在路由根组件中添加basename属性，使用process.env.PUBLIC_URL自动适配构建路径：

  import { BrowserRouter } from 'react-router-dom';
  
  function App() {
    return (
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        {/* 你的路由定义 */}
      </BrowserRouter>
    );
  }
  

  这一步是核心——如果basename不匹配实际部署路径，即使路由定义执行了，也无法匹配到对应的路由组件，导致组件断点不触发。

• 检查web.config重写路径的正确性
  如果你的应用部署在IIS的虚拟目录下（比如站点地址是http://localhost/my-react-app），需修改web.config中的重写目标路径，指向虚拟目录的根：

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

  同时确认index.html能直接访问（比如访问http://localhost/my-react-app/index.html），若无法访问，检查IIS站点的物理路径是否指向构建后的build文件夹。

• 验证静态资源加载状态
  打开Chrome开发者工具的Network标签，刷新页面：

  • 检查所有js、css、图片等静态资源是否返回200 OK，若出现404，说明资源路径错误，可尝试将package.json中的homepage改为具体的部署路径（比如"/my-react-app"）后重新构建。
  • 若资源返回304，强制清除浏览器缓存（Ctrl+Shift+R），确保加载最新的构建文件。

• 排查路由匹配规则
  确认路由定义中的路径是否与当前URL匹配：

  • 若使用了exact属性，检查是否因路径匹配过于严格导致组件不渲染；
  • 直接在浏览器控制台打印window.location.pathname，对比路由定义的路径，确认是否一致。

• 临时切换为HashRouter验证
  若上述步骤无效，可暂时将BrowserRouter替换为HashRouter（无需服务器端重写）：

  import { HashRouter } from 'react-router-dom';
  
  function App() {
    return (
      <HashRouter>
        {/* 你的路由定义 */}
      </HashRouter>
    );
  }
  

  若切换后页面正常渲染，说明问题出在BrowserRouter的basename配置或IIS的URL Rewrite规则上。

• 确认web.config的位置
  确保web.config文件放在构建后build文件夹的根目录（与index.html同级），否则IIS无法读取重写规则。

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