Azure IIS重写中的React Router [英] React Router in Azure IIS Rewrite

问题描述

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

I have a few routes in my React app that accept a GUID value as a parameter. For instance, a user receives an email with a link and follows that link to verify and activate their account on the site.

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

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

When I deploy this app to Azure, I am able to serve the page through express and navigate to http://[mysiteUrl]/register but static links provided in confirmation emails yield 404 errors.

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

Here is my current web.config from the site/wwwroot folder:

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

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

This doesn't work and looks like it just attempts to navigate to a separate page in the same location:

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

What is the correct way to configure this file so that I can serve up parameterized routes?

推荐答案

好的，所以这个问题非常愚蠢，但是我确实设法解决了这个问题.问题是 index.html

Alright, so the issue was pretty stupid, but I did manage to get it sorted. The issue was the route resolution in the index.html

此:

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

必须更改为此:

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

这是我最后的web.config:

Here's my final 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的任何内容.所有的路由都在这里处理.

Should be noted that I'm not leaving anything up to Express. All the routing is handled here.

这篇关于Azure IIS重写中的React Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！