React SPA 应用 hash 路由如何使用锚点
当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash 被路由占据了,导致本来不是问题的锚点功能却成了一个不大不小的问题。
经过我自己的搜索目前有两种方式能够解决这个问题,为了能在 react 生态下面简单优雅的使用,我专门封装了一个锚点组件 react-anchor-without-hash,它使用了类似原生 a 标签的写法,并且可以支持滚动的距离和指定滚动的元素,尽可能的满足业务的需求。
不过在介绍这个组件之前,还是得先说一下两种基本的解决方案。
两种解决方案
scrollIntoView
scrollIntoView 方法可以让当前的元素滚动到浏览器窗口的可视区域内。
它的使用方法如下:
var element = document.getElementById("box");
element.scrollIntoView();
这个 api 兼容 IE8 及以上的浏览器,所以可以放心使用。
注:IE10 之前的 IE 浏览器部分支持,具体请查看Can I Use。
scrollTop
另一个方法是使用 scrollTop 这个 api,这个方法的兼容性也是比较好的,这个方法相比于 scrollIntoView
来说需要你自己定义要滚动的元素和要滚动的高度,虽然看起来麻烦一些,但是好处是自由度比较高,试想一下下面的场景:
- 你有一个 A 元素在 Content 里面,Content 设置了滚动,你想让 A 元素滚动到可视区域内。
- 如果用
scrollIntoView
会变成下面这样,A 元素显示到整个浏览器视口的最上面,这样就会和 Header 重合,被遮挡住一部分。
- 所以这时候需要使用
scrollTop
去设置 content 滚动距离,比如说是 60px,最后的效果就变成了我们想要的结果。
使用方式如下:
const cont = document.querySelector('#container');
const a = document.querySelector('#a');
cont.scrollTop = a.offsetTop + 60;
react-anchor-without-hash
以上两种方式如果想方便的在项目里面使用多少都需要封装一下,而且使用起来和原生的 a 标签形式也相差甚远。
但是如果是在 react 技术栈下,我们可以利用组件来封装一个类似 a 标签的锚点,这样在使用形式上,我们就能更接近于原生的方式,降低使用成本。
于是我写了这个 react 组件,兼容以上两种方案,让你能够非常简单的实现锚点,如果使用了该组件的话,上面的实现方式就会变成下面这样:
import Anchor from 'react-anchor-without-hash'
// ......
const anchorProps = {
type: 'scrollTop',
container: '#container',
interval: 60
}
<div id="container" style={{position: 'relative', overflow: 'scroll'}}>
<Anchor name="a" {...anchorProps}>
<div>
<h2>This is a</h2>
<div>There are some text...</div>
</div>
</Anchor>
</div>
这时候你只需要在页面的地址栏输入: http://somehost/path/#hash?_to=a
页面就会让 A 滚动到你想要的位置啦!
github:https://github.com/kwzm/react-anchor-without-hash
demo:https://kwzm.github.io/react-anchor-without-hash/
codesandbox: https://codesandbox.io/embed/react-anchor-without-hash-2xq2h
欢迎讨论和Star!!!
React SPA 应用 hash 路由如何使用锚点的更多相关文章
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- SPA中,Node路由优先级高于React路由
一.问题描述 在一场面试中,面试官问到了React和Node路由之间的关系. 现在SPA(单页面应用)的使用越来越广. Node(后台)和React(前端)都有自己的路由,当我页面访问一个URL的时候 ...
- SPA中前端路由基本原理与实现方式
SPA 前端路由原理与实现方式 通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: 修改 url 中 Hash 利用 H5 中的 history Hash 我们都知道 ur ...
- React+DvaJS 之 hook 路由权限控制
博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...
- HahsRouter hash 路由
无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原 ...
- 告别 hash 路由,迎接 history 路由
博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...
- 前端hash路由基本原理,及代码的基本实现
路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...
- hash路由
class HashRouter{ constructor(){ //用于存储不同hash值对应的回调函数 this.routers = {}; window.addEventListener('ha ...
- ASP.NET .Core 集成 React SPA 应用
AgileConfig的UI使用react重写快完成了.上次搞定了基于jwt的登录模式(AntDesign Pro + .NET Core 实现基于JWT的登录认证),但是还有点问题.现在使用reac ...
随机推荐
- Linux磁盘与分区
正在从新装载虚拟机,碰到磁盘分区一阵头大,花了一下午对分区的基本原理做了一个梳理 一.磁盘 硬盘内部结构:
- Python用法
Python用法 IDE IDE是集成开发环境:Integrated Development Environment的缩写. 使用IDE的好处在于按,可以把编写代码.组织项目.编译.运行.调试等放到一 ...
- 简介SoftICE是Compuware NuMega公司1的产品,是目前公认最好的系统级调试工具
简介SoftICE是Compuware NuMega公司1的产品,是目前公认最好的系统级调试工具
- Ubuntu 下载 Eclipse + tomcat 配置
tomcat下载 去网站下载core中的 tar.gz的文件 下载之后依然转移到/opt文件夹然后进行解压 sudo cp apache-tomcat- /opt sudo tar -zxvf apa ...
- Ubuntu中目录右下角的锁标志
在ubuntu中如果是用root权限创建的目录,在普通权限下展示时则会出现一个锁的标志,表明该目录是一个受保护的目录(只读,不能写入和删除),普通权限无法对其进行操作.如用命令sudo mkdir d ...
- xss magic_quotes_gpc
---恢复内容开始--- magic_quotes_gpc函数,在php5.4以上移除了, 但是很奇怪的是 我的5.6版本这边 是可以找到这个选项的. 在php.ini文件里面,默认关闭,如果将此 ...
- VUE过滤器的使用 vue 时间格式化
过滤器介绍 官方教程地址:https://cn.vuejs.org/v2/guide/filters.html 过滤器常被用于一些文本格式化 我们可以自定义过滤器,可以实现各种各样的功能. vue时间 ...
- RabbitMQ延迟消息的延迟极限是多少?
之前在写Spring Cloud Stream专题内容的时候,特地介绍了一下如何使用RabbitMQ的延迟消息来实现定时任务.最近正好因为开发碰到了使用过程中发现,延迟消息没有效果,消息直接就被消费了 ...
- #!/usr/bin/env bash和#!/usr/bin/bash的比较
#!/usr/bin/env bash和#!/usr/bin/bash的比较 stackoverflow: http://stackoverflow.com/questions/16365130/th ...
- 2015.11.10 asn1学习笔记
Openssl : OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 在OpenSSL被曝出现严 ...