龙哥是你能质疑的吗?
[干货]React-Keeper : 比React-Router更适合你的单页面路由器
@vifird 先谢谢你们开源这么优秀的路由模块,谢谢
然后,想问一下 React-Keeper 是否支持 模态画廊
之所以这么问,是因为我们当前项目里面存在非常多的弹窗(非覆盖式,左右上下弹出式),弹窗出现是点击某个列表中的某条数据,我希望能更新 hashurl 来显示弹窗内容,而且我也可以通过复制 url 的方式在新页面定位到列表页,并且直接打开这个弹窗。
同时也想问下大约什么时候能够有一个集中式的文档说明(文档站点),单个 md 的文档看起来非常零碎,比较难串起来看。
@lovefishs 可以的。
弹窗可以使用嵌套路由来实现,嵌套路由的优势是:在打开子组件之前会打开父组件,你们的场景,可以将底页面作为父组件,弹窗作为子组件,每个子组件有自己的URL,类似于下面的结构:
<Route path='/parent' component={ Parent }>
<Route path='/chiild1' component={ Child1 }/>
<Route path='/chiild2' component={ Child2 }/>
</Route>
这样可以通过/parent/child1来访问Child1页面,/parent/child2来访问Child2页面,并且Parent页面会预先加载。
Parent组件内需要嵌入子页面Child1和Child2,代码像这样:
const Parent = (props)=> {
return (
<div>
<div>Parent页面内容</div>
<div>{props.children}</div>
</div>
)
}
当然,按你们的场景,Child1 Child2应该要设计为fixed(或absolute)定位,也可以添加载入动画来优化视觉体验。
@vifird 非常感谢您的耐心解答!谢谢!!
在使用 react-router
的时候我经常会有这样的需要: React-router 改变 params 时组件如何重新挂载。这个后面通过给组件指定 key
的方式算是解决了一部分,那么路由组件本身能不能感知到这种变化从而重建组件呢(或者一些更高效的方式)?
这是一个很多路由库存在的问题,存在问题的原因是这样的:Route组件通过判定URL是否匹配来决定是否解绑、挂载组件,参数变化的前后,当前Route始终是匹配状态,所以没有进行解绑与重新挂载;改进这点的难度也是比较大的,一方面Route组件无法判定当前URL变化是否要强制重新渲染当前组件,另一方面进行重新挂载的成本是比较高的。我们也在考虑这方面的设计,目前还没有找到比较满意的解决方案。
当然,目前使用key的方式,或者使用componentWillReceiveProps(推荐)的方式可以实现大部分需求。
@vifird 谢谢您的耐心解答!
准备在后面的项目里面实际使用 React-Keeper
试试,有相关问题会直接去 github 给你们提 issue,项目已 star ,当前希望能尽快的提供更详细的文档!
看了微信出的weui 和 蚂蚁金服的antd ,貌似都没有解决页面缓存问题,这个需求在移动端太常见了。vue可以用keep-alive,一直在找react 有没有相应的解决方案,感谢楼主分享 。
请问reack-keeper 的link control 有提供<Link to={{
pathname: ‘/courses’,
search: ‘?sort=name’,
hash: ‘#the-hash’,
state: { fromDashboard: true }
}}/>这样的参数传递方式吗