React 应用程序部署到 IIS StaticFile 处理程序问题

问题描述

我有一个示例 React 应用程序。我将应用程序部署到 IIS。默认页面没问题，但 /category 页面返回 404 - 找不到文件或目录。

import { Route,browserRouter } from "react-router-dom";

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const Category = () => (
  <div>
    <h2>Category</h2>
  </div>
);

export default function App() {
  return (
      <browserRouter>
        <Route path="/"><Home /></Route>
        <Route path="/category"><Category /></Route>
      </browserRouter>
  );
}

Web.config 文件内容。 runAllManagedModulesForAllRequests 解决方案很遗憾不起作用。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="UrlRoutingModule"/>
    </modules>
  </system.webServer>
</configuration>

详细的错误信息

• 模块：IIS Web 核心
• 通知：MapRequestHandler
• 处理程序：静态文件
• 错误代码 0x80070002

请给点建议

解决方法

使用 URL 重写模块，将所有请求重定向到 index.html 文件。

<?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>