[干货]React-Keeper : 比React-Router更适合你的单页面路由器

#10

龙哥是你能质疑的吗?:rage:

#11

@blackoo00
有使用滚动插件吗?这个问题有可能是滚动插件导致的。

#12

如何记住滚动位置?有没有demo可以展示下

#13

我没有使用滚动插件,也是会有滚动条会影响下一个页面位置的变动。

#14

如果没有使用滚动插件,那滚动条可能是加在body标签上的,这样所有的内容会同时滚动,这里应该合理地选择滚动容器,可以避免这个问题。

#15

@vifird 先谢谢你们开源这么优秀的路由模块,谢谢

然后,想问一下 React-Keeper 是否支持 模态画廊

之所以这么问,是因为我们当前项目里面存在非常多的弹窗(非覆盖式,左右上下弹出式),弹窗出现是点击某个列表中的某条数据,我希望能更新 hashurl 来显示弹窗内容,而且我也可以通过复制 url 的方式在新页面定位到列表页,并且直接打开这个弹窗。

同时也想问下大约什么时候能够有一个集中式的文档说明(文档站点),单个 md 的文档看起来非常零碎,比较难串起来看。

#16

@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)定位,也可以添加载入动画来优化视觉体验。

#17

@vifird 非常感谢您的耐心解答!谢谢!!

在使用 react-router 的时候我经常会有这样的需要: React-router 改变 params 时组件如何重新挂载。这个后面通过给组件指定 key 的方式算是解决了一部分,那么路由组件本身能不能感知到这种变化从而重建组件呢(或者一些更高效的方式)?

#18

这是一个很多路由库存在的问题,存在问题的原因是这样的:Route组件通过判定URL是否匹配来决定是否解绑、挂载组件,参数变化的前后,当前Route始终是匹配状态,所以没有进行解绑与重新挂载;改进这点的难度也是比较大的,一方面Route组件无法判定当前URL变化是否要强制重新渲染当前组件,另一方面进行重新挂载的成本是比较高的。我们也在考虑这方面的设计,目前还没有找到比较满意的解决方案。

当然,目前使用key的方式,或者使用componentWillReceiveProps(推荐)的方式可以实现大部分需求。

#19

@vifird 谢谢您的耐心解答!

准备在后面的项目里面实际使用 React-Keeper 试试,有相关问题会直接去 github 给你们提 issue,项目已 star ,当前希望能尽快的提供更详细的文档!

#20

好的,文档我们正在努力中~

#21

react-keeper如何监控路由的变化?

#22

目前没有开放监听路由变化的方法,这是一个什么样的使用场景?(很多场景可以使用enterFilter和leaveFilter解决)

#23

看了微信出的weui 和 蚂蚁金服的antd ,貌似都没有解决页面缓存问题,这个需求在移动端太常见了。vue可以用keep-alive,一直在找react 有没有相应的解决方案,感谢楼主分享 。

#24

感谢,欢迎加入Keeper开发,有很多很有挑战性的问题需要解决。

#25

请问reack-keeper 的link control 有提供<Link to={{
pathname: ‘/courses’,
search: ‘?sort=name’,
hash: ‘#the-hash’,
state: { fromDashboard: true }
}}/>这样的参数传递方式吗

#26

有类似的支持: <Link to=`/courses?sort=name#the-hash` state={{ fromDashboard: true }}/></Link>

#27

有类似于exact的精确匹配的办法吗

#28

path='/prod/list>'就可以实现精确匹配,关键点是在>标记结尾,类似正则里的$

#29

/jjjj/list 这种怎么解决啊 jjjj 是不存在的 还是能访问到 list