添加一个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. phpcms首页替换

    大图轮播替换 {pc:content action="lists" catid="13" order="id DESC" num=" ...

  2. win10安装JDK

    1.下载 首先,在官网下载 JDK:Oracle 官网 如上图所示,在 Oracle 官网下载 JDK,有一点需要注意,那就是在咱们下载合适的 JDK 之前,需要先点击“标记1”所在的按钮,选择接受. ...

  3. Windwos Live Writer插件指南

    Windows Live Writer 即(WLW) 是一个免费的桌面应用程序,可以用于发布博客. 官网下载地址:https://www.microsoft.com/zh-CN/download/de ...

  4. python_study-1

    # Author:larlly'''函数1.在Python交互式命令行下,可以直接输入代码,然后执行,并立刻得到结果.2.文本编辑器推荐俩款 http://www.sublimetext.com/ h ...

  5. Python3 批量替换文本内容

    Python3 批量替换文本内容 示例: # coding:utf8 import os; def reset(): i = 0 path = r"H:\asDemo\workdemo\aw ...

  6. redhat6.4提权Ⅱ

    本次演示只针对redhat6.4, 其他的系统不知道有没有效果. 下面开始吧 建立普通用户并授予密码 [root@localhost yum.repos.d]# useradd test [root@ ...

  7. flask --- 04 . 偏函数, 线程安全,栈堆,

    一.偏函数(partial) ①第一种 结果为: ② 第二种 二.线程安全 将空间转换成时间 问题: 1秒钟打印所有结果 threading.current_thread().ident :线程ID ...

  8. JS(JavaScript)的初了解5(更新中···)

    1.函数 关键词function 首先,我们先复习一下前面的知识: var 是JS的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. var可以在内存模块提前(JS代码执行前)完 ...

  9. 【做题】SDOI2017苹果树——dfs序的运用

    原文链接 https://www.cnblogs.com/cly-none/p/9845046.html 题意:给出一棵\(n\)个结点的树,在第\(i\)个结点上有\(a_i\)个权值为\(v_i\ ...

  10. Learning-Python【6】:Python数据类型(2)—— 列表、元组

    一.列表类型 1.用途:记录多值,比如人的多个爱好 2.定义方式:在[ ]内用逗号分隔开多个任意类型的值 li = [1, 2, 3] 3.常用操作+内置方法 优先掌握的操作: 1)按索引存取值:可以 ...