Azure IIS 重写中的react-router

IT技术 reactjs azure react-router iisnode
2021-04-30 05:52:22

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

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

当我将此应用程序部署到 Azure 时，我能够通过 express 提供页面并导航到http://[mysiteUrl]/register但确认电子邮件中提供的静态链接会产生 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>

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

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

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 留下任何东西。所有的路由都在这里处理。

其它你可能感兴趣的问题
上一篇预期呼叫次数：>= 1 接收呼叫次数：0 下一篇使用实时 Firebase 数据库的 React 应用程序内存泄漏