Question

在React SPA中，我在/ src / pages /文件夹下有一个“页面”集合。

入口点页面是/ src /文件夹下的index.js文件，在这里我定义了一个路由器常量，如下所示：

const routing = (
  <Router>
    <div>
      <Switch>
        <Route path="/signIn" component={SignIn} />
        <Route exact path="/" component={Homepage} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
        <Route path="/page3" component={Page3} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>

在本地托管时效果很好。所有页面都可以像“ localhost / page2”一样导航，它将正确呈现Page2 React组件。

将其托管在Azure App Service中时出现问题。在Azure中，如果尝试这样的路由“ https://mypretentiousapp.azurewebsites.net/page2”，则会显示以下错误：

您要查找的资源已被删除，名称已更改或暂时不可用。

如here和here所述，我尝试使用以下配置在wwwroot文件夹下添加一个web.config：

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React 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="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

不幸的是，那并不能解决问题。

作为临时的解决方法，我在Azure App Service中创建了虚拟目录，将其中的每个虚拟目录路由到根（/）文件夹，如下所示：

虚拟目录“ / signIn”路由到：“ /”。
虚拟目录“ / page1”路由到：“ /”。
虚拟目录“ / page2”路由到：“ /”。
虚拟目录“ / page3”路由到“ /”。

这是一个临时解决方法，因为：

它不缩放。对于创建的每个新的React路由，必须在App Service中创建一个新的虚拟目录。
将无法访问React应用程序的“未找到” 页面。
此解决方法对“ 这是<脚的”具有令人无法忍受的恶臭。

我在web.config解决方案中做错什么了吗，它实际上应该可以解决此问题？还有其他解决方案吗？

Azure路由干扰了React路由

0 个答案: