reactjs - SPA 404 刷新：Heroku 上的 Go+React 应用程序

问题描述

我在 Heroku 上看到了一个我在本地没有遇到问题的问题。我看过各种文章和其他解决此问题的 SO 帖子，我了解到这与static.json在我的应用程序中正确配置文件有关，以便 heroku 正确处理前端反应路由，但我我在解决这个问题时遇到了一些真正的麻烦。

我正在使用以下 buildpacks 并确认它们是通过 Heroku Dashboard > Settings 安装的：
https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku-community/static.tgz
https://github.com/mars/create-react-app-buildpack
使用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...

我曾尝试将static.json文件放在应用程序根目录以及client目录中，但均无济于事。如果我刷新或从外部站点导航到主页以外的任何内容，仍然会看到 404。

标签： reactjsgoherokureact-router

解决方案

因此，我在研究此问题时发现的所有 static.json 解决方案似乎都不起作用。据我所知，这似乎是反应路由和/或 Heroku 的一个已知问题。

话虽如此，如果这对遇到此问题的其他人有帮助，我就是这样解决的：

在服务器上设置 NotFound 处理程序：

所有这个 NotFound 处理程序所做的就是提供您的 index.html 文件，允许您的 SPA 框架自己处理路由（确定有效还是真正未找到）。

我在 go/gin-gonic 中通过以下方式实现了这一点：
```
e := gin.New()
// gin engine set up...

e.NoRoute(func(ctx *gin.Context){
    ctx.File("./web")
})
```
原因是 - 当您正常点击您的应用程序（通过基本 url）时，您的应用程序将提供 index.html，然后应用程序内的后续点击通过 SPA 路由处理。但是，如果您直接导航到任何其他路由（即手动进入https://<your domain>.com/foo地址栏中），您将绕过 SPA 路由并直接进入服务器。这种情况也可以通过简单地刷新主页以外的任何页面来实现。

因此，当您在服务器上找到一个 not found 时提供 index.html，您将重新启用 SPA 框架来发挥其魔力，并在其有效时提供该路由，这是我们想要的，但也能够处理404 由...
在 React App 中连接 NotFound 组件：

我在 React 中实现了这一点，方法是制作一个简单的组件并连接一个 Route 以在定义所有其他路由后将其注册到 path="*" 作为 catch all 来使用它：
```
<Router basename="/">
    <Route exact path="/foo">
        <FooView />
    </Route>
    <Route exact path="/">
        <HomeView />
    </Route>
    <Route path="*">
        <NotFoundView />
    </Route>
</Router>
```

reactjs - SPA 404 刷新：Heroku 上的 Go+React 应用程序

问题描述

解决方案

推荐阅读