React@16.x(38)路由v5.x(3)其他组件

目录

  • 1,Link
  • 2,NavLink
  • 3,Redirect

之前的文章中,已经介绍过了 BrowserRouter / HashRouterRouteSwitchwithRouter 这些组件。

再介绍3个常用的组件:

1,Link

官方文档

生成一个无刷新跳转的 <a> 元素。

主要的属性:

  1. to
    • 字符串,表示跳转的路径
    • 对象,属性和 history.location 的属性相同。
  2. replace,表示跳转时是否替换当前地址,默认 false
  3. innerRef,可以将 Link 内部的 <a> 元素的 ref 附着到传递的对象或函数上。

无刷新跳转的大致原理:

import { withRouter } from "react-router-dom";function Link(props) {return (<ahref={props.to}onClick={(e) => {e.preventDefault();props.replace ? props.history.replace(props.to) : props.history.push(props.to);}}>{props.children}</a>);
}export default withRouter(Link);

node 就是 a 元素。
innerRef={node => { console.log(node)}}

2,NavLink

官方文档

Link 的基础上实现的,并添加了额外的功能:

to 匹配到当前路径时,会对生成的 <a> 元素添加对应的类名或样式,来表示激活状态。

举例:

<NavLink to="/b">跳转b</NavLink>

如果当前的路由路径是匹配到 /b 的(/b/b/c 等),则 <NavLink> 会给对应的 <a> 元素添加 class="active",这样就可以设置激活状态的 <a> 元素的样式了。

生成的 <a> 元素

<a aria-current="page" class="active" href="/b">跳转b</a>

主要的属性:

  1. activeClassName,匹配时的类名,默认 active
  2. activeStyle,匹配时的样式,可以直接写内联样式。
  3. exactsensitiveRoute 组件对应的属性的含义一致。

3,Redirect

官方文档

重定向组件,当加载到该组件时,会自动无刷新的跳转到指定的地址。

举例1:除了 /a/b,其他任何路径都会重定向到 /a

<Router><Switch><Route path="/a" component={A}></Route><Route path="/b" component={B}></Route><Redirect to="/a">重定向到 /a</Redirect></Switch>
</Router>

举例2:当访问根路径时,登录状态则重定向到 /dashboard,否则渲染 <PublicHomePage /> 组件

<Route exact path="/">{loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

主要的属性:

  1. to,表示要重定向的路径。字符串或对象,和 <Link>to 属性一样。
  2. push,表示重定向跳转是 push | repalce,默认 false
  3. from,表示匹配到 from 对应的路径规则,才会进行跳转到 to
  4. exact,是否精确匹配 from
  5. sensitive,匹配 from 时是否对大小写敏感。

tofrom 都可以写正则表达式,和 <Route path="/a/:id"> 一样。

举例3

<Redirect from="/c/:id" to="/a">重定向到 /a</Redirect>

当匹配到 /c/xxx 时,才会跳转到 /a

举例4

<Redirect from="/c/:id" to="/a/:id">重定向到 /a</Redirect>

当匹配到 /c/xxx 时,会跳转到 /a/xxx


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/32944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Django + Web + MySQL的智慧校园系统

基于Django Web MySQL的智慧校园系统 由于时间紧迫&#xff0c;好多功能没实现&#xff0c;只是个半吊子的后台管理系统&#xff0c;亮点是项目安全性还算完整&#xff0c;权限保护加密功能检索功能有实现&#xff0c;可参考修改 功能如下&#xff08;服务为超链接&#xff0…

面试突击指南:Java基础面试题1

1. Lambda表达式 Lambda表达式提供了一种简洁的方式来实现接口的单个抽象方法,通常用于替代匿名类。 示例: List<String> names = Arrays.asList("peterF", "anna", "mike", "xenia"); Collections.sort(names, (a, b) -&g…

java面向对象(4)

目录 1.多态 1.1如何构成多态 1.2多态的调用规则 1.3多态的向下转型 1.4 instanceof运算符 1.5多态的好处 2.final关键字 3.接口 3.1接口中可以定义哪些成员 3.2接口的使用 3.2接口的特性 1.多态 多态:同一种事物,在不同的时刻表现出不同的状态 1.1如何构成多态 …

yii2 ActiveForm使用技巧

持续更新&#xff1a; 1、搜索输入框&#xff1a;form-inline <?php $form ActiveForm::begin([action > [index],method > get,options > [class > form-inline] &#xff08;增加此行代码&#xff09; ]); ?>

PBR网络数据流量分流+NQA联动静态路由

一、实验目的&#xff1a; 企业有两个网段&#xff0c;业务1网段和业务2网段&#xff0c;拓扑图如下&#xff0c; 二、实验要求 pc1报文走左侧链路到达ar1&#xff0c;pc2报文走右侧链路到达ar1&#xff0c;且当ar2或者ar3发生故障时候&#xff0c;可以通过另一个设备到达ar1…

1.4 Kettle 数据同步工具详细教程

工具介绍 一、概述 Kettle&#xff0c;又名 Pentaho Data Integration&#xff08;PDI&#xff09;&#xff0c;是一个开源的数据集成工具&#xff0c;最初由 Pentaho 公司开发。它能够从多种数据源提取、转换并加载&#xff08;ETL&#xff09;数据&#xff0c;适用于数据仓…

字符串根据给定关键词进行高亮显示

问题 一般使用搜索引擎的时候我们会发现,搜索出来的内容都对我们搜索的关键词进行了高亮显示, 这样我们能很直观的看出是不是我们想要的结果, 最近我也遇到了类似的功能, 因为关于舆情的系统使用到了ES, 一开始心想ES本身就有支持的API实现起来不难, 但我这里的需求还不太一样…

Altera的JTAG电路下载模块为何上下拉电阻,不可不知的秘密

一、FPGA背景信息 当前的FPGA市场上有国际和国产两大体系&#xff0c;国际排名&#xff0c;一直很稳定&#xff0c;国际上前三名Xilinx、Altera、Lattice&#xff0c;国内FPG厂商也在填补空白&#xff0c;低端、中低端市场上发力&#xff0c;替代潮流已在兴起&#xff0c;目前…

【驱动篇】龙芯LS2K0300之单总线驱动

实验过程 实验目的&#xff1a; 在龙芯开发板上面使用单总线驱动DS18B20温度传感器 ① 根据原理图连接DS18B20模块 ② 将i2c0引脚的功能复用为GPIO ③ 注册字符设备&#xff0c;按照DS18B20的读写时序编写读写驱动接口 ④ 编写测试用例解析传感器的数值 原理图 将板子上…

jupyter notebook 中使用ipython 魔法指令整理

在 Jupyter Notebook 中&#xff0c;IPython 魔法指令为数据分析和探索提供了很多便利。以下是一些常见且实用的 IPython 魔法指令及其用法&#xff1a; 1. %timeit 魔法指令 用于测量一段代码的执行时间。 %timeit [i for i in range(1000)]2. %matplotlib inline 魔法指令…

政务云VMware私有云企业云平台建设参考学习方案资料

下面资源来源于网络&#xff0c;如有侵权请联络删除&#xff01; NetApp私有云及虚拟化解决方案&#xff08;49页&#xff09;.pptx Openstack构建企业私有云.pdf VMware私有云解决方案&#xff08;84页&#xff09;_.docx 上海市政务云管理暂行办法.pdf 私有云平台实施方案…

马尔可夫聚类算法

马尔可夫聚类算法&#xff08;Markov Clustering Algorithm&#xff0c;MCL&#xff09;是一种用于图聚类的算法&#xff0c;广泛应用于生物信息学、社交网络分析、推荐系统等领域。 其核心思想是模拟随机游走过程&#xff0c;通过迭代地扩散和收缩图上的概率分布来识别图中的…

章十九、JavaVUE —— 框架、指令、声明周期、Vue-cli、组件路由、Element

目录 一、 框架 ● vue.js 框架 ● 特点 ● Vue 安装 二、 第一个vue程序 ● 创建项目 ​编辑 ● 导入 vue.js ● 创建vue对象&#xff0c;设置属性&#xff0c;使用模版渲染到页面 介绍 — Vue.js (vuejs.org) 三、 vue指令 ● v-text ● v-html ● v-…

LeetCode 671.二叉树第二小的结点

这个题我们可以用数组辅助完成&#xff0c;然后进行排序后&#xff0c;再用再进行取值&#xff0c;这是我的代码块: /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/void Preorde…

【07】持久化-数据库选择和设计

1. 数据库选择 在比特币原始论文中,并没有提到要使用哪一个具体的数据库,它完全取决于开发者如何选择。Bitcoin Core ,最初由中本聪发布,现在是比特币的一个参考实现,它使用的是 LevelDB。 我们将要使用的是BoltDB。Bolt DB是一个纯键值存储的 Go 数据库。没有具体的数据…

上海市计算机学会竞赛平台2023年9月月赛丙组分形扩张

题目描述 一开始&#xff0c;你只有一个数字&#x1d460;s&#xff0c;&#x1d460;s 只可能为 00 或 11。接下来&#xff0c;你需要将这个数字扩张 &#x1d45b;n 轮&#xff0c;最后变成一个 2&#x1d45b;2&#x1d45b;2n2n 的矩阵&#xff0c;每轮的扩张规则如下&…

uniapp scroll-view 虚拟滚动【适合每条数据高度一致】

基本原理 有一万条数据&#xff0c;我们按10条一页来进行分组&#xff0c;会有1000页页面滚动到第10页的位置的时候&#xff0c;10页之后和10页之前是不用被显示的&#xff0c;可以直接隐藏掉如果是数据删除&#xff0c;页面会不流畅&#xff0c;会卡顿一下&#xff0c;且滚动位…

vue-cli搭建

一、vue-cli是什么&#xff1f; vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个 vue 的项目模板&#xff1b;预先定义 好的目录结构及基础代码&#xff0c;就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目&#xff0c;这个骨架项目就是脚手架&#xff0c;…

一个使用Python和假设的天气API来获取和展示天气数据的简单脚本示例

要使用Python编写一个天气预测的脚本&#xff0c;我们通常需要依赖于现有的天气API来获取实时或历史天气数据&#xff0c;并且结合机器学习或统计模型来进行预测。然而&#xff0c;由于天气预测是一个复杂的任务&#xff0c;通常需要大量的计算资源和专业的气象知识&#xff0c…

QT事件处理系统之二:窗口部件的事件拦截,以及事件的传递顺序

1、案例说明 在父窗口中为selfLineEdit窗口安装事件过滤器,这样我们可以在父窗口中首先拦截来自于selfLineEdit本身产生的事件,并且决定该事件最终是否继续传递到selfLineEdit窗口本身。 2、关键代码 selfLineEdit.cpp #include "selfLineEdit.h" #include &l…