react-router作为react框架路由解决方案在react项目中举足轻重。
在react-router 4.0版本中,API与先前版本相比有了很大的修改,在2.0、3.0中常用的
其中
而
前者:http://127.0.0.1:3000/article/num1
后者:http://127.0.0.1:3000/#/article/num1(不一定是这样,但#是少不了的)
这样的区别带来的直接问题就是当处于二级或多级路由状态时,刷新页面,
我们当然不希望前端路由被发送到后台。
在react-router 4.0 的文档中有这样一段话:
注意:
使用 hash 的方式记录导航历史不支持 location.key 和 location.state。 在以前的版本中,我们为这种行为提供了 shim,但是仍有一些问题我们无法解决。 任何依赖此行为的代码或插件都将无法正常使用。 由于该技术仅用于支持传统的浏览器,因此在用于浏览器时可以使用这就要求服务器要配合前端做一些简单的修改。
修改的思想就是当收到请求的url不是功能性的,而是前端路由时,重新加载入口html文件(我的后台是nodejs)。
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果然解决了问题。
原文链接:https://www.f2er.com/js/34419.html