三大核心库与对应的组件
history -> react-router -> react-router-dom
react-router-dom
的核心,里面封装了,,>等核心组件,实现了从路由的改变到组件的更新的核心功能。以及配套方法、hook。这部分只和 react 有关,和宿主无关,像 在初始化的时候,必须手动传入宿主对 history api 的实现。
可视为react-router
的核心,也是整个路由原理的核心,里面集成了popState,history.pushState
等底层路由实现的原理方法。给 browser、hash 两种 history 统一了 api,补充了订阅的能力,最终规范成 react-router 需要的接口供 react-router-dom 调用。模块划分:
主要调用逻辑:
当地址栏改变url,组件的更新渲染都经历了什么?😊😊😊 拿history模式做参考。当url改变,首先触发histoy,调用事件监听popstate
事件, 触发回调函数handlePopState
,触发history下面的setstate
方法,产生新的location对象,然后通知Router组件更新location
并通过context上下文传递,switch
通过传递的更新流,匹配出符合的Route组件渲染,最后有Route
组件取出context
内容,传递给渲染页面,渲染更新。
在切换不同的组件中,有俩种方式,push和replace。
默认的是push,即每切换url,之前的路由仍然在history栈中。
如果切换默认使用的是replace,则当前的URL路由会替换掉栈顶的路由记录。
<Link push = {true} to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}Link>