ZF_react react-router prompt lazy的实现

prompt的实现

在这里插入图片描述在这里插入图片描述
可以看到Prompt接受两个入参,一个是when,一个是Message,用来提示,其实就是在当前页面退出去的时候拦截一下,alert一个东西。
实现思路:
在生命周期的时候处理,然后push的时候进行拦截。
在这里插入图片描述
使用一个组件LifeCyclle
在这里插入图片描述
创建的时候执行block(message),销毁的时候执行销毁函数,这个block是在history拿到的,所以我们必须在histoy定义。
在这里插入图片描述
定义一个全局变量
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在每次push的时候拦截判断就可以了,看效果:
在这里插入图片描述
通过定义全局变量存放message,通过组建的生命周期设置message的值,在push的时候进行一个拦截就可以了。

实现router的hooks在这里插入图片描述

在这里插入图片描述

useHistory, useLocation, useRouteMatch, useParams,如上,他们的作用分别是获取对应的对象。这些hooks必须在包裹着Router里面的组件才能用。
useRouterMatch用于传入一个对象匹配当前路劲是否匹配。匹配则返回对象,不匹配则返回null
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实现完成。

实现路由的懒加载

在这里插入图片描述
在这里插入图片描述

React提供了lazy的写法,可以动态引入模块,是固定写法,必须通过()=>import()引入文件,然后使用Suspense包裹,但动态路由还没加载出来的时候,会渲染fallback的react元素来代替。

实现lazy

思路,()=>import()返回的是一个promise,当.then的时候就证明可以渲染组建了。而.then的参数就是该文件导出的内容。
在这里插入图片描述
当lazy这个组件被渲染的时候,才去执行load,拿到导出的内容去渲染,从而达到懒加载的效果。

猜你喜欢

转载自blog.csdn.net/lin_fightin/article/details/121062640