仅在部署到 Azure Web 应用程序后才反应 JS 应用程序路由问题答案

【问题标题】：React JS App Routing Issue Only After Deploying to Azure Web App仅在部署到 Azure Web 应用程序后才反应 JS 应用程序路由问题
【发布时间】：2020-09-24 17:05:54
【问题描述】：

我有一个带有 React Router 的 React JS 应用程序。在开发过程中，npm start，我没有遇到任何问题。我像往常一样访问以下位置。

http://localhost:3000

并且由于路由代码，它变成了

http://localhost:3000/index

应用加载正常。此时，

我点击重新加载，应用程序继续正常运行。
我手动链接或加载'http://localhost:3000/index'，应用运行正常。

然后，稍后，我执行 npm 构建，进入此构建文件夹，再次执行相同的操作。该应用程序运行良好。我重新加载，它运行良好。到目前为止没有什么可抱怨的。

问题部分。

然后我决定将该应用程序部署到一个 azure Web 应用程序。该应用程序运行良好。我去这个网站。

https://randomstuffreactjsappsept24.azurewebsites.net

由于路由代码，它变成了

https://randomstuffreactjsappsept24.azurewebsites.net/index

然后，网站加载。

此时，如果我点击重新加载（问题！！），它会尝试重新加载，

https://randomstuffreactjsappsept24.azurewebsites.net/index

我收到以下错误。

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

现在，如果我删除 '/index' 并加载原始 url，

https://randomstuffreactjsappsept24.azurewebsites.net

网站加载正常，没问题。请注意，您可以自己查看。这是一个现场直播。（但当然，由于路由代码，它变成了）

https://randomstuffreactjsappsept24.azurewebsites.net/index

现在，只要我不重新加载网站，网站就会继续运行。为什么会这样？

这是项目中 index.js 主页面的代码。

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/index" render={(props) => <Index {...props} />} />
      <Redirect to="/index" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

完整的应用程序在这里 - https://github.com/Jay-study-nildana/RandomStuffReactJSApp

更新 2

我决定尝试另一个完全由另一个来源创建的 react 应用程序。再一次，同样的问题，我有一个现场网站要展示。

我从 Web 应用程序中访问 https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api，它运行良好。如果此时我要重新加载，它将显示“您要查找的资源已被删除、名称已更改或暂时不可用。”
我从应用程序内访问 http://localhost:3000/external-api，它工作正常。而且，如果我要重新加载，它会加载得很好。

因此，它绝对“只”在部署后发生。

【问题讨论】：

标签： reactjs azure react-router azure-web-app-service

【解决方案1】：

根据：https://github.com/react-boilerplate/react-boilerplate/issues/1612 您必须放置：只需将以下名为 web.config 的文件放在您的 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 文件添加到 azure 目录

【讨论】：

嗨。但是，我没有使用反应样板。不确定这是否适用于我。
我认为你可能是对的。我在其他地方也看到过类似的解决方案。我会在进一步调查后更新。
我将您提供的解决方案与此处的讨论链接在一起，stackoverflow.com/questions/50753669/…，它确实有效。很好。

【解决方案2】：

我遇到了同样的问题。我们的 Azure App Servive 正在运行 PHP 和 Apache，所以我们使用了一个 .htaccess 文件，就像 Create React App 的部署文档中建议的那样。 https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

将.htaccess 添加到公用文件夹中，这样就可以停止这些类型的 Aapp 服务的刷新问题。

【讨论】：