react-router仅根路径可访问，配置服务端通配路由时报错如何解决？

报错原因 #

• 第一个Cannot GET /home报错：你使用的是BrowserRouter（history路由模式），直接在地址栏输入/home访问时，请求会先发到后端，后端没有配置/home对应的路由，就会返回404。
• 第二个No default engine was specified报错：res.render()是Express用于渲染模板引擎（如EJS、Pug）的方法，你没有配置任何模板引擎，也没有指定模板后缀，调用该方法自然触发报错，你需要返回React打包后的静态HTML文件，应该用res.sendFile()而不是res.render()。

具体解决步骤 #

1. 调整Express服务端配置 #

首先确保你已经引入了path模块，先配置静态资源托管，再配置通配路由：

const path = require('path')
// 先配置静态资源托管，指向React打包后的build文件夹
// 注意路径根据你的项目结构调整，示例中server.js在backend文件夹，build在项目根目录
app.use(express.static(path.join(__dirname, '../build')))

// 所有未匹配到的接口都返回index.html，交给前端处理路由
// 这行代码要放在所有其他路由定义的最后
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build', 'index.html'))
})

如果是开发环境用create-react-app的代理服务，不需要改后端，直接在package.json里加"homepage": "."即可。

2. 优化React路由冗余代码 #

你当前的路由配置里，<Router>下已经直接渲染了一次<App/>，同时Switch里又匹配/路径渲染App，会导致App组件重复渲染，建议调整为：

function Routing() {
    return (
        <Router>
            <div>
                <Switch>
                    <Route path = "/" exact component={App} />
                    <Route path = "/home" exact component={Home} />
                </Switch>
            </div>
        </Router>   
    )
}

3. 验证效果 #

• 生产环境：执行npm run build打包React项目生成build文件夹，重启Express服务后，访问/和/home都可以正常加载。
• 开发环境：如果用create-react-app自带的devServer，不需要改后端配置，只要确认路由规则正确即可正常跳转。

内容的提问来源于stack exchange，提问作者Evergreen bangladesh