node部署react/react-router静态文件路由问题

今天又又又踩坑。。天天都在踩坑的路上不停歇。。

 

昨天将webpack开发模式(webpack-dev-server以及热更新)和打包都完成了，今天又有新要求。

 

由于react-router基于browserHistory写的，本身还readme里友情提示了一下本地处理须要用hashHistory，结果就被怼了。不容许修改源代码。。那我就开始头痛了，由于browserHistory下打包好的静态文件访问就疯狂报错。

 

度娘上查了一番 说法都是browserHistory须要服务器的支持。而后大哥又发话了：没说必定不用服务器。。那就用node来部署一下静态文件好了。

 

app.use(express.static(path.resolve(__dirname, '../build')))

经过app.use将静态文件传到node服务器上，打开监听的http://localhost:8080/ 发现网页出来了跳转到http://localhost:8080/login，暗自觉得能够了，结果手贱按了一下刷新，报错开始：Cannot GET /login

 

node找不到这个路由，又开始头痛，由于本身在前端用react-router写了路由，node识别不出来，查了一下发现，node的路由优先级大于react-router路由。

 

那么前面只是将静态资源上传上去了，访问http://localhost:8080/login时，node找不到/login这个路由，更找不到index.html这个页面，那么咱们须要将这个页面传上去，让前端去对路由进行识别

app.use(express.static(path.resolve(__dirname, '../build'))) app.use(function(req, res){ res.sendFile(path.resolve(__dirname, '../build/index.html')); })

再启动，刷新 ok完事