react 服务器端渲染 ssr 中 localstorage/history/window is not defined 解决方案
2024-09-07 08:50:15
1、原因
ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期
也就是说 ssr 阶段是不会执行 componentDidMount 方法的
当你在 componentWillMount 之前当生命周期里面调用 window / localstorage 全局对象的时候,
它其实是在服务器上面执行等,因为 window / localstorage 是浏览器的属性对象。
所以在 服务器端 跑的时候,就会出现没有定义的错误。
2、解决方案
个人觉得可以把这些浏览器的属性重新封装以便使用。
例如:
let targetWin = null if(window) targetWin = window var proxyWindow = new Proxy(targetWin,{ get: function (target, key, receiver) { if(!targetWin) { return Reflect.get({nothing:function () {}}, 'nothing', receiver); } return Reflect.get(target, key, receiver); } }); export default proxyWindow
没有在项目中试过,不过我觉得这是一个完美解决方案。
上面是用了 es6 的 proxy 做代理。
当 window 不存在时候,如果调用了 window 上面的方法或者属性就会执行 nothing 这个方法。
也就是说 在服务器渲染的时候 不会找不到 window ,而会执行 nothing 方法。
这样就不会报错了。
这里的话,以后使用 window 的对象的话,就需要引用这个模块。
以此类推,localstorage / location 等都可以用此类方法实现了。
最新文章
- Xamarin Android 绑定jar库同时将so库打包进去
- open文件操作
- js html 一些技巧
- mysql给其他用户权限访问我的数据库
- 倔强的网站数据抓取,关键时刻还需Webbrowser显身手
- Linux-NTP-Server+Client
- Java----多线程知识点归纳(概念)
- 基于visual Studio2013解决C语言竞赛题之0902文件查找
- Python 获得Facebook用户有一个共同的兴趣Friends
- 测试驱动 ASP.NET MVC Type Aliase
- linux下文件和目录
- Python课程第二天作业
- Linux下source命令详解
- 012-mac下shell,zsh,oh-my-zsh,以及插件
- poj1149构图题
- Django form choices, placeholder
- Bootstrap(2) 排版样式
- winform窗体 小程序【打开多个窗体、窗体之间传值、打开唯一窗体】
- oracle instr函数(oracle 用instr 来代替 like)
- Star打印机数据解密
热门文章
- swiper移动端下不能正常轮播的解决方案-----此坑没躺过估计很难找到正确姿势
- 重装macOS环境配置笔记
- android手机web网站拨打电话几种方式
- Windows live writer 2012 测试
- iTOP-4412开发板全新升级支持4G全网通模块
- Nexus环境搭建
- 两个自动配置IPv4
- rtim() 函数说明
- caffe blob理解
- powerdesigner连接MySQL数据库时出现Non SQL Error : Could not load class com.mysql.jdbc.Driver