当前位置:首页 > 开发 > 行业应用 > 正文

react-router 返回顶部的两种方式

发表于: 2016-08-24   作者:qiaolevip   来源:转载   浏览:
摘要: 当我们使用react-router给项目带来便利的同时,也会遇到各种不顺的问题,比如当我们从A页面进入B页面的时候,由于共享了同一个history,导致浏览的位置也被记录下来的,这样A页面滑动到底部了,进入B页面也在底部,也显然不符合我们的浏览习惯。还好react-router提供相应的事件配置我们正常开发:方案一onUpdate: window.scrollTo(0,0)}history={ha

当我们使用react-router给项目带来便利的同时,也会遇到各种不顺的问题,比如当我们从A页面进入B页面的时候,由于共享了同一个history,导致浏览的位置也被记录下来的,这样A页面滑动到底部了,进入B页面也在底部,也显然不符合我们的浏览习惯。

还好react-router提供相应的事件配置我们正常开发:

方案一 onUpdate:

 

<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}>
    <Route path="/" component={ App }>
</Router>

 

 

方案二:history.listen监控

hashHistory.listen((location) => {
  setTimeout(() => {
    if (location.action === 'POP') return;
    window.scrollTo(0, 0);

    console.log('Back to top', location);
  });
});

<Router history={hashHistory}>
    <Route path="/" component={ App }>
</Router>

 

 

这样我们就可以每次当router变化的时候控制是否需要滚动到顶部。

 

更多操作事件及获取属性参考:

react-router 返回顶部的两种方式_第1张图片

react-router 返回顶部的两种方式

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
react-router 路由:保证url和视图同步 react-router是在react基础上建立起来的, react渲染通过:p
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <
点击返回顶部,简单易学 效果图: 第一步:将返回按钮fixed到具体位置后隐藏 第二步:当浏览器滚动
只需一句jQuery代码实现返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需
网页中,返回顶部很普遍。现有一例子,主要靠图片 + Jquery + CSS来完成: 效果有以下几个方面: 1
本实例主要是解释在struts2下通过jquery的ajax从后台获取json数据,返回前台进行显示,记录学习的脚步
只需一句jQuery代码实现返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可
整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一、JSP或
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号