React项目部署Heroku后访问非首页路由提示Cannot GET错误如何解决

问题原因 #

你使用了React的BrowserRouter客户端路由方案，所有路由跳转逻辑都在前端侧实现。当前你的Express服务仅配置了静态资源托管规则，当用户直接访问/alunos等非根路径、或是在子路径页面刷新时，请求会直接发送到Express服务端，而服务端没有对应路径的处理逻辑，因此返回Cannot GET错误。

解决方案 #

修改server.js配置，增加通配符路由规则，所有未匹配到静态资源的请求统一返回前端构建产物的index.html，将路由控制权交还给前端：

const express = require('express')
const path = require('path')
const app = express()
const PORT = process.env.PORT || 3102

app.use(express.static('build'))
// 新增通配符路由，必须放在静态资源托管规则之后
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
})

app.listen(PORT, () => console.log('Servidor Front em execução!'))

修改后重新部署到Heroku即可解决问题。

内容的提问来源于stack exchange，提问作者Rodrigo Temporim