使用Umi SSR 报错 Warning: Did not expect server HTML to contain a ＜div＞ in ＜div＞.

问题描述：

使用umi进行服务端渲染报错 Warning: Did not expect server HTML to contain a <div> in <div>.

解决方法：


import React, { useEffect, useLayoutEffect } from 'react'
React.useLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

如果你用到了 Ant Motion （OverPack，QueueAnim）入场动画，可能还是会报错

解决方案：

1. 把 "rc-queue-anim" 和 "rc-scroll-anim" 升级或降级到以下版本（其他版本可能还是有问题）

"umi": "^3.5.30",
"rc-queue-anim": "1.8.5",
"rc-scroll-anim": "^2.7.6",

2. 声明一个 useIsClient 来判断是不是浏览器访问

import React, { useState, useEffect } from 'react'function useIsClient () {const [isClient, setIsClient] = useState(false)useEffect(() => setIsClient(true), [])return isClient
}export default useIsClient

3. 在使用到入场动画（OverPack，QueueAnim）的文件内引入并使用，使用方法如下

import React from 'react'
import QueueAnim from 'rc-queue-anim'
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'
import useIsClient from '@hooks/useIsClient'function Demo ({ id }) {// isClient 为true的时候说明是服务端渲染，false 为客户端渲染（浏览器）const isClient = useIsClient()// 由于使用 QueueAnim，OverPack 的时候是有动画的时候才会去生成 dom，// 但是服务端渲染的时候不需要动画直接生成 dom 即可，// 通过控制 QueueAnim 和 OverPack 的 appear 参数，// 让他服务端渲染的时候去除动画直接生成 domreturn (<OverPackappear={ isClient }><QueueAnimtype="bottom"appear={ isClient }><div key={1}></h4><div key={2}></div></QueueAnim></OverPack>)
}
export default Demo

4. 还有个解决方案，就是在服务端渲染的时候将 QueueAnim 换成其他标签，如下：

import React from 'react'
import QueueAnim from 'rc-queue-anim'
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'
import useIsClient from '@hooks/useIsClient'function Demo ({ id }) {// isClient 为true的时候说明是服务端渲染，false 为客户端渲染（浏览器）const isClient = useIsClient()// 在服务端渲染的时候将 QueueAnim 换成 divfunction Dom (props) {if (isClient) {return (<QueueAnim appear={isClient}>{ props.children }</QueueAnim>)} else {return (<div>{ props.children }</div>)}}return (<Domtype="bottom"appear={ isClient }><div key={1}></h4><div key={2}></div></Dom>)}
export default Demo

使用Umi SSR 报错 Warning: Did not expect server HTML to contain a ＜div＞ in ＜div＞.相关推荐

vagrant up报错 Warning: Authentication failure. Retrying...解决方案
vagrant up报错 Warning: Authentication failure. Retrying...解决方案参考文章: (1)vagrant up报错 Warning: Authent ...
ionic4 背景设置动态图片报错WARNING: sanitizing unsafe style value background-image:url
ionic4 背景设置动态图片报错WARNING: sanitizing unsafe style value background-image:url WARNING: sanitizing uns ...
python报错warning: install_lib: 'build\lib' does not exist -- no Python modules to install
先哭一会儿,差点搞自闭 python 离线安装python-docx模块离线包 https://files.pythonhosted.org/packages/e4/83/c66a1934ed5ed ...
docker部署禅道报错 WARNING: IPv4 forwarding is disabled. Networking will not work.
docker部署禅道报错 WARNING: IPv4 forwarding is disabled. Networking will not work. 通过 #创建网络后启动禅道服务器 docke ...
树莓派重启DHCP报错Warning: The unit file, source configuration file or drop-ins of docker.service changed
问题树莓派重启DHCP报错Warning: The unit file, source configuration file or drop-ins of docker.service change ...
MySQL无法启用/etc/my.cnf配置文件,重启报错Warning: World-writable config file ‘/etc/my.cnf’ is ignored的解决方法
MySQL无法启用/etc/my.cnf配置文件,重启报错Warning: World-writable config file '/etc/my.cnf' is ignored的解决方法问题分析 ...
Linux启动进入紧急模式报错Warning: Intel Processor - this hardware has not undergone upstream testing.
我在vmware中删除了一个虚拟机的某一块硬盘,导致开机直接进入紧急模式,并报错Warning: Intel Processor - this hardware has not undergone u ...
pod状态为pending，报错 warning failedscheduling 2m42s (x221 over 5h3m) default-scheduler
因为"Tolerations:node.kubernetes.io/not-ready:NoExecute for 300s"处于"Pending"状态,报错 ...
IAR工程编译报错Warning[Pe223]: function “Get_Tempreture“ declared implicitly......
IAR工程编译报错Warning[Pe223]: function "Get_Tempreture" declared implicitly E:\stm32编程文件\编程文件\4 ...

使用Umi SSR 报错 Warning: Did not expect server HTML to contain a ＜div＞ in ＜div＞.

问题描述：

使用umi进行服务端渲染报错 Warning: Did not expect server HTML to contain a <div> in <div>.

解决方法：

如果你用到了 Ant Motion （OverPack，QueueAnim）入场动画，可能还是会报错

使用Umi SSR 报错 Warning: Did not expect server HTML to contain a ＜div＞ in ＜div＞.相关推荐

最新文章

热门文章