Reactjs 仅在部署到Azure Web App后才对JS应用程序路由问题作出反应

我有一个React JS应用程序，带有React路由器。在开发过程中，npm启动，我没有遇到任何问题。我像往常一样访问以下地点

http://localhost:3000 

由于路由代码，它变得

http://localhost:3000/index

https://randomstuffreactjsappsept24.azurewebsites.net/index

https://randomstuffreactjsappsept24.azurewebsites.net/index

应用程序的负载也很好。在这一点上,

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

然后，稍后，我做一个npm构建，进入这个构建文件夹，再做一个npm启动，同样的事情。该应用程序运行正常。我重新加载，它运行良好。到目前为止没有什么可抱怨的

问题部分

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

https://randomstuffreactjsappsept24.azurewebsites.net

由于路由代码，它变得

http://localhost:3000/index

https://randomstuffreactjsappsept24.azurewebsites.net/index

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

该网站负载刚刚好，没有问题。请注意，您可以亲自查看。这是一个实时站点。（但当然，由于路由代码的原因，它变为）

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

下面是该项目的main index.js页面的代码

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

ReactDOM.render(
} />
,
document.getElementById（“根”）
);

完整应用程序可在此处获得-

更新2

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

• 我从web应用程序中访问，它运行良好。如果此时重新加载，它会说“您正在查找的资源已被删除、名称已更改或暂时不可用。”
• 我访问，http://localhost:3000/external-api，从应用程序内部，它运行良好。而且，如果我要重新加载，它加载得很好

因此，它肯定“只”发生在部署之后。

根据： 您必须放置以下文件： 只需将以下名为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目录

我也遇到了同样的问题。我们的Azure应用服务运行的是PHP和Apache，因此我们使用了一个

.htaccess

文件，就像Create React应用程序的部署文档中建议的那样

选项-多视图
重新启动发动机
重写cond%{REQUEST_FILENAME}-F
重写规则^index.html[QSA，L]

---

将

.htaccess

添加到公用文件夹，这将停止您对这些类型的Aapp服务的刷新。

您好。但是，我没有使用react样板文件。我不确定这是否适用于我。我想你可能是对的。我在其他地方也看到过类似的解决方案。我将在进一步调查后更新。我将您提供的解决方案与此处的讨论联系在一起，它起到了作用。杰出的