react-router解决锚点跳转问题

时间:2022-06-30 12:05:26

添加一个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&lowbar;html&lowbar;input中autocomplete&equals;&quot&semi;off&quot&semi;在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C&num;模拟httpwebrequest请求&lowbar;向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP&period;NET EF 使用LinqPad 快速学习Linq

    js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...

  3. &lbrack;转&rsqb; 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&period;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. session 的用法

    </head> <body> <?php //session_start();//开启session,必须写在PHP代码最顶端 //HTTP,无状态性 //记录登陆者状态 ...

  2. ThinkPHP:读取数据库数据 &lpar;2&rpar;

    项目配置文件Conf/config.php中添加数据库连接信息: // 添加数据库配置信息 'DB_TYPE' => 'mysql', // 数据库类型 'DB_HOST' => 'loc ...

  3. Hibernate的搭建及使用

    1.创建普通的java项目. 因为Hibernate是一个轻量级的框架,不像servlet,还必须需要tomcat的支持,Hibernate只要jdk支持即可. 2.引入jar包. 可以在项目中直接引 ...

  4. Mysql变量列表

    变量表解释 (https://dev.mysql.com/doc/refman/5.7/en/server-system-variables.html)

  5. GDI&plus;&lowbar;从Bitmap里得到的Color数组值解决方案

    ' InkHin_ZhiZhuo ' Date :2019.2.18 ' E-mail lqx@tyningling.Top 'This function and Module is written ...

  6. mvc项目用log4net 记录错误日志

    1.  首先下载lognet 下载地址 http://logging.apache.org/log4net/download_log4net.cgi 2.找到bin文件中的net文件夹  之后看你电脑 ...

  7. Python用户名密码登录系统(MD5加密并存入文件,三次输入错误将被锁定)及对字符串进行凯撒密码加解密操作

    # -*- coding: gb2312 -*- #用户名密码登录系统(MD5加密并存入文件)及对字符串进行凯撒密码加解密操作 #作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.co ...

  8. bzoj 1614 Telephone Lines架设电话线 - 二分答案 - 最短路

    Description Farmer John打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司支付一定的费用. FJ的农场周围分布着N(1 <= N ...

  9. Git-Flow &vert; How it’s used and why you should

    Git-Flow | How it’s used and why you should What is Git-Flow about? Git-Flow is a workflow for using ...

  10. WPF基础学习笔记整理 (七) Binding绑定

    基础知识: 数据绑定是一种关系,该关系告诉WPF从源对象提取一些信息,并用这些信息设置目标对象的属性:目标对象始终是依赖属性,而源对象则可以是任何内容. BindingOperations类,提供静态 ...