react-router解决锚点跳转问题
添加一个onClick方法。onClick方法传入一个锚点的id,然后用下面的函数来找到锚点并跳转到锚点。
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在,就跳转到锚点
if(anchorElement) { anchorElement.scrollIntoView(); }
}
}
react-router解决锚点跳转问题的更多相关文章
- React单页面应用使用antd的锚点跳转失效
首先在react项目中引用antd的锚点 import {Anchor} from 'antd';const { Link } = Anchor; <Anchor> <Link hr ...
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- React躬行记(13)——React Router
在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...
- React Router学习笔记(转自阮一峰老师博客)
React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
随机推荐
- Vue+element 实现文件导出xlsx格式
傻瓜教程: 第一步:安装两个依赖包 npm install --save xlsx file-saver 第二步:建立一个Vue文件,导入以下代码即可 <template> <d ...
- 《linux就该这么学》第三节课 第二节命令笔记
命令笔记 (随笔原创,借鉴请修改) linux系统中一切都是文件 2.4 系统状态的命令: ifconfig : 查看系统网卡信息,包括网卡名称,ip地址,掩码,mac地址,收到数据包大 ...
- linux 生成密钥,并向git服务器导入公钥
1. server1 上使用haieradmin用户 ,先清理之前的ssh登录记录,rm –rf ~/.ssh , 运行ssh-keygen –t rsa(只需回车下一步即可,无需输入任何密 ...
- GDScript 格式化字符串
GDScript offers a feature called format strings, which allows reusing text templates to succinctly c ...
- https://scrapingclub.com/exercise/detail_sign/
def parse(self, response): # pattern1 = re.compile('token=(.*?);') # token = pattern1.findall(respon ...
- Ubuntu16.04 appstreamcli错误
解决方案:https://askubuntu.com/questions/774986/appstreamcli-hanging-with-100-cpu-usage-during-update 搬运 ...
- 正则表达式中test,match,exec区别
testtest 返回 Boolean,查找对应的字符串中是否存在模式.var str = "1a1b1c";var reg = new RegExp("1." ...
- webform ajax 异步请求
第一种就是对应方法的请求 虽然对应方法 但还是会刷新页面 webform是基于事件的 每次请求都会出发pageload <script> $(function () { $("# ...
- Dockerfile构建容器---语法高亮
三个文件扔进相关的目录即可 wget -O /usr/share/vim/vimfiles/doc/dockerfile.txt https://raw.githubusercontent.com/a ...
- 剑指offer(19)顺时针打印矩阵
题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2, ...