添加一个onClick方法。onClick方法传入一个锚点的id,然后用下面的函数来找到锚点并跳转到锚点。

scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在,就跳转到锚点
if(anchorElement) { anchorElement.scrollIntoView(); }
}
}

react-router解决锚点跳转问题的更多相关文章

  1. React单页面应用使用antd的锚点跳转失效

    首先在react项目中引用antd的锚点 import {Anchor} from 'antd';const { Link } = Anchor; <Anchor> <Link hr ...

  2. 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 ...

  3. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  4. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  5. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  6. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  7. React躬行记(13)——React Router

    在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...

  8. React Router学习笔记(转自阮一峰老师博客)

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  9. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

随机推荐

  1. CentOS 7 下使用yum安装MySQL5.7.20

    CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ,但是CentOS7的yum源中默认好像是没有mysql的. 上一篇安装的是5.6的但是我想安装5.7的  yum安装是最简单 ...

  2. Ubuntu16.04彻底卸载MySQL

    删除mysql的数据文件 sudo rm /var/lib/mysql/ -R 删除mysql的配置文件 sudo rm /etc/mysql/ -R 自动卸载mysql(包括server和clien ...

  3. JavaScript获取及判断文件类型

    一.获取文件后缀 <input type="file" name="addvedio" accept="video/*"/>注: ...

  4. 必须添加对程序集"System.Core"的引用

    在项目下的web.config中添加 <compilation debug="true" targetFramework="4.0"> <as ...

  5. ajax return 的问题

    平时都是在AJAX里执行逻辑,实然想到能不能return返回数据呢? ajax 是异步请求,return拿值得时候 ajax并没有取到值,所以是undefind. 需要把ajax的请求方式改为同步 v ...

  6. Redis学习-常用命令

    keys * 返回满足的所有键 exists key 是否存在指定的key,存在返回1,不存在返回0 expire key time 设置指定key的过期时间,可以使用ttl key查看剩余时间 pe ...

  7. es日常维护

    1.查看es日志curl -XGET http://10.26.41.60:9200/xdm-logs-2018.08.22?pretty=true 2.删除es日志curl -XDELETE 'ht ...

  8. [c/c++] programming之路(17)、高级指针

    一.二级指针 二级指针的作用:1.函数改变外部变量指针2.外挂改变一个指针的值 #include<stdio.h> #include<stdlib.h> void main() ...

  9. JS(JavaScript)的初了解3(更新中···)

    1. {} 在JS中我们把它叫代码块.如果代码块里的内容没有执行完,语句不会向下执行. 代码块是一个独立的整体.如果JS中某一条语句出错,那么就会在此终止不会向下执行. 2. 循环语句 循环,就是对一 ...

  10. shh和maven项目报错

    朋友整合ssh时突然报错, org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Cata ...