SPA 404 on Refresh： Go+React App on Heroku

Question

我在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

Answer 1

因此，我在研究此问题时发现的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>