添加一个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. 《linux就该这么学》第八节课:第六章存储结构与磁盘划分

     笔记 (借鉴请修改) 6.3.文件系统与数据资料 目前linux最常见的文件系统: ext3:日志文件系统.宕机时可自动恢复数据资料,容量越大恢复时间越长,且不能保证百分百不丢失.   ext4:e ...

  2. 使用 Docker 搭建 Java Web 运行环境(转)

    原文 http://www.importnew.com/21798.html Docker 是 2014 年最为火爆的技术之一,几乎所有的程序员都听说过它.Docker 是一种“轻量级”容器技术,它几 ...

  3. 使用freemarker和itext把html转pdf

    1.把html转pdf,首先必须要解决中文显示问题,CSS样式问题以及可能的JS问题,先上例子,自己去体会. 2.先去下载simsun.ttc字体: 2.demo.html <!DOCTYPE ...

  4. 记账本微信小程序开发五

    准备做首页和分页 准备一些图标的图,用ps或者用创客贴都欧克 建图片的文件夹和首页的编辑

  5. Dvelopment descriptor

    部署描述符是JavaEE程序常见的一部分,但是之前都没有较为全面的学习过,这里就较为全面的记录一下部署描述符中的元素.部署一个Servlet 3 或以上应用程序是一件轻而易举的事.通过Servlet注 ...

  6. DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined

    DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined 原因:table 中定义的列和aoColumns ...

  7. Python socket实现处理多个连接

       socket实现处理多个连接 实现处理多个连接 使用whlie循环实现多个客户端,排队请求服务端 循环监听端口发送信息(windos,Linux) 1.Linux 系统如果客户端断开连接,会循环 ...

  8. ukylin 使用deepin-wine

    之前一直是使用deepin的,但是自打前阵子更新内核之后,我的显卡就总出问题,这里也顺便f**k下NVIDIA. 在装了十几二十遍系统之后我终于还是妥协了,deepin最近又更新了,不知道解决我的显卡 ...

  9. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  10. Java 基础 类加载器和双亲委派机制 学习笔记

    转自博客:https://blog.csdn.net/weixin_38118016/article/details/79579657 文章不是我写的,但是感觉写的挺通俗易懂的,然后防止以后丢失,就转 ...