详解react-router 4.0 下服务器如何配合BrowserRouter
react-router作为react框架路由解决方案在react项目中举足轻重。
在react-router4.0版本中，API与先前版本相比有了很大的修改，在2.0、3.0中常用的
其中
而
前者：http://127.0.0.1:3000/article/num1
后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）
这样的区别带来的直接问题就是当处于二级或多级路由状态时，刷新页面，
我们当然不希望前端路由被发送到后台。
在react-router4.0的文档中有这样一段话：
注意：使用hash的方式记录导航历史不支持location.key和location.state。在以前的版本中，我们为这种行为提供了shim，但是仍有一些问题我们无法解决。任何依赖此行为的代码或插件都将无法正常使用。由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用
这就要求服务器要配合前端做一些简单的修改。
修改的思想就是当收到请求的url不是功能性的，而是前端路由时，重新加载入口html文件（我的后台是nodejs）。
//catch404andforwardtoerrorhandler
app.use(function(req,res,next){
//判断是主动导向404页面，还是传来的前端路由。
//如果是前端路由则如下处理
fs.readFile(__dirname+'/public/dist/index.html',function(err,data){
if(err){
console.log(err);
res.send('后台错误');
}else{
res.writeHead(200,{
'Content-type':'text/html',
'Connection':'keep-alive'
});
res.end(data);
}
})
});
此处踩坑无数，在网上搜索方法后换用nginx，使用try_files字段定向到入口html，但是重定向后，webpack打包的js文件没有执行。
在查看firebug时发现此次刷新的响应头中设置了"Connection":"keep-alive";
觉得问题应该出在这里，换用nodejs用200状态配合keep-alive果然解决了问题。
在react-router4.0多级路由下刷新页面不会再404，而是保存了前端状态。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。