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间的同步 下面就来简单 ...
随机推荐
- nginx----------nginx日志详细分解
1.客户端(用户)IP地址.如:上例中的 47.52.45.228 2.访问时间.如:上例中的 [03/Jan/2013:21:17:20 -0600] 3.请求方式(GET或者POST等).如:上例 ...
- [PHP] swoole在daemonize模式下,chdir失效问题
swoole version: 1.9.6 其实跟swoole的版本无关,因为原代码体系,fpm模式下,在启动的时候,是使用 chdir 函数改变了当前目录的,而其它代码在做类的自动加载的时候,都是写 ...
- wingIDE Pro6 破解教程
亲测wingIDE pro6.0.6-1激活成功 算号器下载 激活的时候选择第三项 打开算号器,获得license id 把算号器里的license id输入到第一步的输入框里 continue得到r ...
- 深入浅出JAVA线程池使用原理2
一.Executor框架介绍 Executor框架将Java多线程程序分解成若干个任务,将这些任务分配给若干个线程来处理,并得到任务的结果 1.1.Executor框架组成 任务:被执行任务需要实现的 ...
- Oracle11g导出为Oracle10g版本数据,解决10g不兼容11g文件
EXPDP USERID='JCSJ/JCSJ@FZBD' schemas=JCSJ directory=bac_file dumpfile=JCSJ.dmp logfile=JCSJ.log ver ...
- TCP协议三次握手、四次挥手
TCP的概述 TCP 把连接作为最基本的对象,每一条 TCP 连接都有两个端点,这种断点我们叫作套接字(socket),它的定义为端口号拼接到 IP 地址即构成了套接字,例如,若 IP 地址为 192 ...
- Navicat Premium 12激活
大自然的搬运工:https://www.jianshu.com/p/5f693b4c9468 声明:本文所提供的所有软件均来自于互联网,个人存放在此作为备用,以备将来不时之需,同时作为大家的分享和学习 ...
- GPU并行的基础知识
- [原][工具][windows10安装][0x800F081F]windows 10 如何离线安装.net framework3.5 || 安装出现错误代码0x800F081F时如何解决
参考解决方案:https://zhidao.baidu.com/question/1896669183365806820.html?fr=iks&word=win10%B0%B2%D7%B0+ ...
- please select android sdk(出现小红叉)
问题原因: 在项目中通过 git 协同开发,项目是 kotlin 与 Java 混合开发.在 build.gradle 中添加依赖之后就出现这个问题了,点击运行无法编译. 在网上找了各种解决办法都没能 ...