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.tgz

• https://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){&nbsp; &nbsp; ctx.File("./web")})原因是 - 当您正常点击应用程序（通过基本URL）时，您的应用程序将提供索引.html，然后通过SPA路由处理来自应用程序内部的后续点击。但是，如果您直接导航到任何其他路由（即在地址栏中手动转到），您将绕过SPA路由并直接转到服务器。这种情况也可以通过简单地刷新主页以外的任何页面来实现。https://<your domain>.com/foo因此，通过提供索引.html当您在服务器上遇到未找到时，您将重新启用SPA框架以发挥其魔力并提供该路由（如果其有效），这是我们想要的，但也能够处理404通过...在 React App 中连接一个 NotFound 组件：我在 React 中通过制作一个简单的组件并连接一个 Route 来使用它来实现这一点，方法是在定义所有其他路由后将其注册到 path=“*” 作为捕获：<Router basename="/">&nbsp; &nbsp; <Route exact path="/foo">&nbsp; &nbsp; &nbsp; &nbsp; <FooView />&nbsp; &nbsp; </Route>&nbsp; &nbsp; <Route exact path="/">&nbsp; &nbsp; &nbsp; &nbsp; <HomeView />&nbsp; &nbsp; </Route>&nbsp; &nbsp; <Route path="*">&nbsp; &nbsp; &nbsp; &nbsp; <NotFoundView />&nbsp; &nbsp; </Route></Router>