我在Heroku上看到了一個問題，我在本地沒有問題。我已經看到了各種文章和其他SO帖子來解決這個問題，并且我已經了解到它與在我的應用程序中正確配置文件有關，以便heroku正確處理前端反應路由，但我在解決此問題方面遇到了一些真正的麻煩。static.json我正在使用以下構建包，并確認它們是通過Heroku儀表板>設置安裝的：https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku-community/static.tgzhttps://github.com/mars/create-react-app-buildpack使用服務器并提供服務以服務于 my 指定的前端gin-gonic./web.Dockerfile我有以下靜態.json：{ "root": "build/", "routes": { "/**": "index.html" }, "clean_urls": false, "https_only": true, "headers": { "/**": { "Strict-Transport-Security": "max-age=31557600" } }}我的項目結構如下：/app- /main.go- /server-- /server package .go files...- /client-- /public-- /src-- /remaining react related files and assets...我嘗試過將文件放在應用程序根目錄中以及dir中，但無濟于事。仍然看到404s，如果我刷新或從外部網站導航到主頁以外的任何內容。static.jsonclient
1 回答
婷婷同學_
TA貢獻1844條經驗 獲得超8個贊
因此，我在研究此問題時發現的static.json解決方案似乎都不起作用。據我所知，這似乎是 react 路由和/或 Heroku 的已知問題。
話雖如此，如果這對遇到此問題的其他人有幫助，這就是我解決它的方式：
在服務器上設置 NotFound 處理程序：
NotFound處理程序所做的就是提供索引.html文件，允許SPA框架處理路由本身（確定是否有效或確實找不到）。
我在go/gin-gonic中通過以下方式實現了這一點：
e := gin.New()
// gin engine set up...
e.NoRoute(func(ctx *gin.Context){
ctx.File("./web")
})
原因是 - 當您正常點擊應用程序（通過基本URL）時，您的應用程序將提供索引.html，然后通過SPA路由處理來自應用程序內部的后續點擊。但是，如果您直接導航到任何其他路由（即在地址欄中手動轉到），您將繞過SPA路由并直接轉到服務器。這種情況也可以通過簡單地刷新主頁以外的任何頁面來實現。https://<your domain>.com/foo
因此，通過提供索引.html當您在服務器上遇到未找到時，您將重新啟用SPA框架以發揮其魔力并提供該路由（如果其有效），這是我們想要的，但也能夠處理404通過...
在 React App 中連接一個 NotFound 組件：
我在 React 中通過制作一個簡單的組件并連接一個 Route 來使用它來實現這一點，方法是在定義所有其他路由后將其注冊到 path=“*” 作為捕獲：
<Router basename="/">
<Route exact path="/foo">
<FooView />
</Route>
<Route exact path="/">
<HomeView />
</Route>
<Route path="*">
<NotFoundView />
</Route>
</Router>
- 1 回答
- 0 關注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消