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

Question

我有一个示例 React 应用程序。我将应用程序部署到 IIS。默认页面正常，但 /category 页面 returns 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

有什么建议吗

Answer 1

使用 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>

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

React app deployed to IIS StaticFile handler problem

iis

http-status-code-400

reactjs