在 Azure 上托管的 React 应用程序中，Url 无法刷新

Question

我刚刚注意到，在我的 React 应用程序中，当用户刷新页面时，网址不起作用。奇怪的是，本地一切正常。我已经使用 create-react-app 创建了该应用程序。我正在阅读 React-router url 在刷新或手动写入时不起作用，但由于构建过程是通过 github 操作自动运行的，因此不清楚如何解决这个问题。谁能建议一个快速解决方案？

Answer 1

问题的答案是

fallbackroutes

在此页面上找到https://learn.microsoft.com/en-us/azure/static-web-apps/configuration。 在 React 应用程序的根文件夹中添加

staticwebapp.config.json

并添加以下内容并推送到 git：

{
  "navigationFallback": {
   "rewrite": "/index.html"
  }
}

Answer 2

我在 GitHub 页面上遇到了同样的问题，这是因为服务器上不存在路由并且由前端路由器处理。

我通过用我的

index.html

替换404页面解决了这个问题。

index.html

将加载到react-router中，而react-router又将处理路由。

您可以尝试将 Azure 404 页面替换或重定向到您的

index.html

。

Answer 3

添加此文件

routes.json

使用以下代码

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

Answer 4

您需要将此代码添加到您的反应应用程序的构建文件夹中，并使用文件名 网络配置

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

这就是您需要做的全部。这将解决您的链接刷新问题