頁面刷新時404找不到頁面

Question

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

所有服務和 UI 都部署在 Kube.netes 集群上。

該網站在 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>

• 通過鏈接在 /public 文件夾中添加了 staticwebapp.config.json （問題未解決）

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

• 在JS和CSS之前的/public/index.html標簽中添加了<base href="/"> （問題未解決，在stackoverflow答案中遇到）

誰能指導我缺少什么，或者需要在 index.html 或 devops 中完成任何外部配置？

提前致謝。

Answer 1

我遇到了這個問題 - 我的 routes.json 文件在根目錄中

我將 routes.json 添加到公用文件夾並且它有效。

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