404 页面刷新时找不到页面答案

【问题标题】：404 Page not found on page refresh404 页面刷新时找不到页面
【发布时间】：2021-08-15 13:18:06
【问题描述】：

我有一个基本的 create-react-app 配置，它部署在 Azure devops 上。我的后端也在 python 中部署在 Azure Devops 上。

所有的服务和 UI 都部署在 Kubernetes 集群上。

该网站在 BASE_URL 上运行良好，它指向 index.html 并在路由回它时加载页面或刷新它。

我能够在应用程序的流程中前进。

例如：BASE_URL --> BASE_URL/about（工作正常）

BASE_URL/关于

（刷新时显示404 | The requested path could not be found）

我正在使用{ BrowserRouter, Route } from "react-router-dom"

根据我的阅读和理解，服务器不理解它，因为 URL 在本地更改并且客户端处理它，当我们单击链接时，会运行一些 Javascript 来操纵地址栏中的 URL，而不会导致页面刷新，进而导致 React Router 在客户端执行页面转换。

我尝试过的事情：

在 /public 文件夹中添加了 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>

在link 的 /public 文件夹中添加了 staticwebapp.config.json（问题未解决）

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

在 /public/index.html 的 JS 和 CSS 之前的标记中添加 <base href="/">（问题未解决，在 stackoverflow 答案中遇到）

谁能指导我缺少什么，或者需要在 index.html 或 devops 中进行任何外部配置？

提前致谢。

【问题讨论】：

标签： javascript azure routes react-router devops

【解决方案1】：

我遇到了这个问题 - 我的 routes.json 文件位于根目录中

我将 routes.json 添加到公用文件夹中，它工作正常。

{
  "routes": [
    {
       "route": "/*",
       "serve": "/index.html",
       "statusCode": 200
    }
 ],
 "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
   }
}

【讨论】：