React应用部署至IIS后出现HTTP Error 404.0未找到错误求助

一、修复web.config语法错误 #

你的web.config文件末尾未正确闭合标签，导致配置完全无效。替换为以下完整的web.config内容：

<?xml version="1.0"?>
<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" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

二、修正React Router代码（适配v6版本） #

你使用了Routes组件，说明是react-router-dom v6版本，但代码仍沿用v5的component属性写法，v6已改用element属性传入JSX元素，且exact属性不再需要（Routes默认精准匹配）。修正后的App.js：

import Menu from "./components/Menu";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Menu />
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
       </Routes>
    </Router>
  );
}

export default App;

修改后重新执行npm run build生成新的build文件夹，再覆盖部署到IIS目录。

三、确认IIS已安装URL重写模块 #

web.config中的重写规则依赖IIS的URL重写模块，未安装则规则无法生效：

• 打开IIS管理器，检查左侧功能列表是否有「URL重写」选项
• 若没有，需安装对应IIS版本的URL重写模块

四、检查部署细节 #

• 确认网站物理路径直接指向React应用的build文件夹，而非包含build的上级目录
• 应用池设置「无托管代码」是正确的，同时确保应用池身份拥有访问build文件夹的权限

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