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 条评论
登录 后参与评论

相关文章

来自专栏移动开发

TableLayout实现均匀布局(条目横向1:1排列)

像下面的布局效果,我们经常使用LinearLayout实现,其实也可以使用TableLayout去简单的实现

963
来自专栏python学习之旅

Python+Selenium笔记(六):元素定位

(一)  前言 Web应用以及包含超文本标记语言(HTML)、层叠样式表(CSS)、JS脚本的WEB页面,基于用户的操作(例如点击提交按钮),浏览器向WEB服务...

3488
来自专栏jiajia_deng

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

1024
来自专栏前端儿

JS设置CSS样式的几种方式

如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] =...

872
来自专栏飞扬的花生

Bootstrap学习------Tabel

     Bootstrap的表格和Html表格大同小异,只是封装了一些css供我们使用 <table>标签必须引用class="table"基类样式,我们可以...

1825
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb02-CSS,JS(Java真正的全栈开发)

? css&javascript 一.CSS 1.CSS介绍 CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。...

35315
来自专栏GreenLeaves

JavaScript之Style属性学习

当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

1938
来自专栏cnblogs

如何写好CSS系列之表单(form)

     表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置;二是表单元素,如:输入框、单选、复选、列表组件、搜索组件等,由于列表组件、搜...

1899
来自专栏写写代码吃吃瓜

利用注解完成变量自动初始化

1384
来自专栏iKcamp

翻译 | 玩转 React 表单 —— 受控组件详解

原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本...

29110

扫码关注云+社区