专栏首页jiajia_dengreact-router 环境使用锚点的方法

react-router 环境使用锚点的方法

锚点是通过在界面中增加一些特征(比如 id),然后在 URL 地址后面加上 #id 就可以访问到指定页面的指定位置,这样可以让我们快速跳转到页面的某个位置,但是在 react-router 中这种方法遇到了问题,因为 react-router 会把 # 当做是 hash 来处理。导致即使跳转到指定页面后,# 后面的锚点也不生效。针对这个问题,在 react-router 的一个 issue 中大家也展开了激烈的讨论。以下是我看过以后整理的几种解决办法。

只有某些页面需要

当只有某些页面需要使用锚点的时候,可以在访问到该页面后使用 react 生命周期中 componentDidMount 阶段来判断 # 后面的字符串,然后使用 dom 操作取到这个字符串所属的 dom,然后滚动到该位置。具体代码如下:

componentDidMount() {
  // Decode entities in the URL
  // Sometimes a URL like #/foo#bar will be encoded as #/foo%23bar
  window.location.hash = window.decodeURIComponent(window.location.hash);
  const scrollToAnchor = () => {
    const hashParts = window.location.hash.split('#');
    if (hashParts.length > 2) {
      const hash = hashParts.slice(-1)[0];
      document.querySelector(`#${hash}`).scrollIntoView();
    }
  };
  scrollToAnchor();
  window.onhashchange = scrollToAnchor;
}

说不准哪些页面会使用

以上方法适用于具有生命周期的 react component,而且是在组件的生命周期中实现这个功能,若需要所有页面都实现这个功能,明显我们不可能在所有 component 中都增加这个方法。这就产生另外一个方案,就是在 Router 的 onUpdate 函数中实现该功能。onUpdate 函数在路由跳转后会被调用一次,如下所示:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

const routes = (
  // your routes
);

function hashLinkScroll() {
  const { hash } = window.location;
  if (hash !== '') {
    // Push onto callback queue so it runs after the DOM is updated,
    // this is required when navigating from a different page so that
    // the element is rendered on the page before trying to getElementById.
    setTimeout(() => {
      const id = hash.replace('#', '');
      const element = document.getElementById(id);
      if (element) element.scrollIntoView();
    }, 0);
  }
}

render(
  <Router
    history={browserHistory}
    routes={routes}
    onUpdate={hashLinkScroll}
  />,
  document.getElementById('root')
)

当地址改变后,hashLinkScroll 会被调用,函数内部实现原理与上面的原理是一样的,拿到 # 后面的 id 并找到指定 dom,然后滚动到该 dom 的位置。

总结

两种方案各有优劣,可以根据自己的情况来选择使用。

Post Views: 1,127

相关

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react-router 环境使用锚点的方法

    我与梦想有个约会
  • Windows 10 键盘 ALT 键与 WIN 键颠倒

    最近重新装了家里台式机电脑系统,但是发现键盘左侧和右侧的 ALT 与 WIN 键功能都颠倒了,搜索了很久资料也没有找到为什么会出现这种情况,但是解决办法还是有的...

    我与梦想有个约会
  • React 项目中使用 highstocks

    highstocks 是一个功能强大且丰富的股票资讯类图表的库,其具有代表意义的项目还有 highcharts 和 highmaps。我最近在做一个股票资讯类的...

    我与梦想有个约会
  • react-router 环境使用锚点的方法

    我与梦想有个约会
  • React 的未来,与 Suspense 同行[每日前端夜话0x85]

    自从 React 团队发布他们的 16.x 愿景以来,已经风靡了整个社区。它添加了一些非常酷的东西:Hooks、惰性加载、Suspense 和缓存 API。

    疯狂的技术宅
  • 使用 redis-shake 迁移 redis-cluster集群

        IDC上云, 有2套redis-cluster需要迁移到云上。 这里我们使用 redis-shake 来做迁移操作。

    二狗不要跑
  • useDrop vue 拖拽hook

    copy_left
  • 遇见大数据可视化: 未来已来,变革中的数据可视化

    今天,大数据已无所不在,并且正被越来越广泛的被应用到历史、政治、科学、经济、商业甚至渗透到我们生活的方方面面中,获取的渠道也越来越便利。

    腾讯大数据可视化设计团队
  • Activity 事件分发

    首先先判断当前事件是否是Down事件,如果是就调用onUserInteraction方法,如果不是就不会调用,所以Up,Move方法不会调用该方法。

    Yif
  • Nginx之Location

    URL地址匹配是Nginx配置中最灵活的部分 Location 支持正则表达式匹配,也支持条件匹配,用户可以通过location指令实现Nginx对动丶静态网页...

    随心助手

扫码关注云+社区

领取腾讯云代金券