如何在 IIS 中启用 React 路由？

Question

以下组件是从我的 React 应用程序的 App.js 加载的。

const Main = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/:userid" component={Banks} />
    </Switch>
  </BrowserRouter>
);

当使用本地开发服务器运行应用程序时，我可以从以下网址获取用户 ID：

http://myAppPath/100

但是，当我构建应用程序并将其托管在 IIS 中时，我无法获取用户 ID。

https://localhost/Bank/100 --> 将 HTTP 更新为 HTTPS

无法识别路由。我使用了 URL Rewrite 但 userid 的值仍然没有进来。

<system.webServer>
    <rewrite>
        <rules>
            <rule name="Routing" enabled="true" stopProcessing="true">
                <match url=".*" />
                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" logRewrittenUrl="true" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

索引.html：

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><title>Bank App</title><link href="./static/css/main.b730bb13.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/main.2564873f.js"></script></body></html>

Answer 1

首先从这里在您的服务器上安装iis url rewrite 。那么只有它尊重您的网址重写配置

更新

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <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" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>