带有 React Router v4 的 IIS 规则

Question

我正在尝试使用 BrowserRouter 让我的路由与 IIS 和 React Router v4 一起使用。

在我的本地主机上，我的所有路由都按预期工作。 React Router 处理我想要的一切：

• http://www.example.com/appfolder/dest
• http://www.example.com/appfolder/dest/CODE
• http://www.example.com/appfolder/dest/CODE/INVALID/URL

现在，在 IIS 中，我设置了一个忽略“/appfolder/api/*”的规则，以便为我的应用程序提供 api。这行得通。

如何让 IIS 重定向到“http://www.example.com/appfolder/dest/CODE”并让 React Router 根据其规则处理它。如果我重定向到“/appfolder/index.html”，我会丢失我想保留给 ReactRouter 处理的“代码”。

如果我尝试使用正则表达式捕获组重定向到“http://www.example.com/appfolder/dest/CODE”，我会得到一个“ERR_TOO_MANY_REDIRECTS”。

我目前在我的 web.config 中有这条规则：

    <rule name="ReactRouter 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="^/appfolder/api/" negate="true" />
      </conditions>
      <action type="Redirect" url="/appfolder/dest/CODE" />
      <!-- also tried this -->
      <!-- action type="Redirect" url="/appfolder/index.html" /-->
    </rule>

Answer 1

我找到了解决方案。我将操作类型更改为 Rewrite，它就像一个魅力。

IIS规则最终解决方案：

<rule name="ReactRouter 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="^/appfolder/api/" negate="true" />
  </conditions>
  <action type="Rewrite" url="/appfolder/index.html" />
</rule>

Answer 2

我能够使用 react-router v4 让事情为我工作的唯一方法是使用 HashRouter：https://reacttraining.com/react-router/web/api/HashRouter

无需更改 web.config！