Azure IIS 重写中的反应路由器

Question

我的 React 应用程序中有一些路由接受 GUID 值作为参数。例如，用户收到一封带有 link 的电子邮件，然后按照 link 验证并激活他们在网站上的帐户。

<Route exact path="/register" component={Register} />
<Route path="/register/:id" component={RegistrationConfirmation} />

当我将此应用程序部署到 Azure 时，我能够通过 express 提供页面并导航到 http://[mysiteUrl]/register，但确认电子邮件中提供的静态 links 会产生 404 错误。

这是 site/wwwroot 文件夹中我当前的 web.config：

 <rules>
     <rule name="Rewrite Text Requests" stopProcessing="true">
         <match url=".*" />
             <conditions>
                        <add input="{HTTP_METHOD}" pattern="^GET$" />
                        <add input="{HTTP_ACCEPT}" pattern="^text/html" />
                        <add input="{REQUEST_URI}" pattern="^api/" negate="true" />
             </conditions>
             <action type="Rewrite" url="dist/index.html" />
     </rule>
     <rule name="register" stopProcessing="true">
         <match url="^/register/*" />
         <action type="Rewrite" url="dist/index.html" appendQueryString="true" />
     </rule>
 </rules>

这不起作用，看起来它只是试图导航到同一位置的单独页面：

配置此文件以便我可以提供参数化路由的正确方法是什么？

Answer 1

好吧，这个问题很愚蠢，但我确实设法解决了它。问题是 index.html

中的路由解析

这个：

<script type="text/javascript" src="./dist/bundle.js"></script>

必须更改为：

<script type="text/javascript" src="/dist/bundle.js"></script>

这是我的决赛 web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <handlers>
      <add name="iisnode" path="./app.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
        <rules>
     <rule name="React Requests">
         <match url="/*" />
         <conditions>
            <add input="{HTTP_METHOD}" pattern="^GET$" />
            <add input="{HTTP_ACCEPT}" pattern="^text/html" />
         </conditions>
         <action type="Rewrite" url="./dist/index.html" />
     </rule>
     </rules>
    </rewrite>

    <security>
      <requestFiltering>
        <hiddenSegments>
          <add segment="node_modules" />
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

  </system.webServer>
</configuration>

请注意，我不会将任何东西留给 Express。所有路由都在这里处理。

Azure IIS 重写中的反应路由器

React Router in Azure IIS Rewrite

azure

iisnode

reactjs

react-router