azure web app的其他路径返回错误

我使用CreateReact应用程序制作了一个react应用程序。我正在尝试在azure web app上部署它。我创建了一个构建并使用FTP进行部署

当有来自应用程序的内部重定向时，我能够看到网页。但是当我试图直接转到url时，我得到了这个错误

例如：

如果基本url是www.example.com，并且应用程序在内部重定向到/new，则页面将转到www.example.com/new。但是如果我直接尝试加载www.example.com/new，我会得到上面显示的响应。这在本地测试中不会发生

演示： 我已经创建了一个演示

当有来自应用程序的内部重定向时，我能够看到网页。但是当我试图直接转到url时，我得到了这个错误

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

---

如果在单击按钮New呈现（重定向到）新页面时使用网络工具捕获网络流量，您会发现它只是在本地更改URL，而不是真正请求

http://data-trigger-mass-test.azurewebsites.net/new

发送到服务器。当您直接浏览并请求

http://data-trigger-mass-test.azurewebsites.net/new

对于服务器，服务器找不到资源，因此返回（404）错误。为了使URL

http://data-trigger-mass-test.azurewebsites.net/new

同时在服务器端和客户端工作，您可能需要在服务器端和客户端为其设置路由。

您的服务器应始终发送所有客户端请求的根html文件，以便它可以通过路由进行反应

如果服务器是NodeJs，请在server.js中添加如下内容

app.get('*', (req, res) => {
   res.sendFile('public/index.html', { root: __dirname });
});

---

将下面的

web.config

文件放在

/site/wwwroot

目录下

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

---

为了让它为我工作，我在公用文件夹中添加了一个

web.config

-文件（这是

favicon.ico

，

index.html

&

manifest.json

所在的位置），并添加了以下代码：

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

---

我希望这可能会有所帮助：）

讨论了“手动刷新或写入时，React router URL不起作用”，这会很有帮助。有更新吗？你找到并解决了这个问题吗？我使用create react app构建了一个react应用程序，我正在使用部署，但我看不到如何解决FTP部署中的其他路由映射问题非常感谢兄弟！你为我节省了很多时间！