react-router-dom 中自定义 Link （custom link)

最新推荐文章于 2024-07-22 17:04:47 发布
最新推荐文章于 2024-07-22 17:04:47 发布
阅读量3.5k 收藏
点赞数
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42060658/article/details/104335292
版权
官网

react-router-dom自定义Link组件

1.0 自定义Link的应用场景 （如:tabtar 实现路由的切换）

在这里插入图片描述

2.0 实现原理：相当于自定义组件（函数式组件，注意不是class组件）

实现步骤一： 按需导入相关模块，注意 最后导入的useRouteMatch的模块是可以判断当前路由是否激活
在这里插入图片描述
实现步骤二: 创建函数式组件的方式，创建一个自定义的Link组件，一定要记得步骤一要导入 useRouteMatch模块，去监测当前路由是否激活
在这里插入图片描述
注意： 上面的 参数名称可以自定义，一般来说作为Link 要传的参数有 路由（如： /aboutus），以及 路由名称 (如：关于我们), 是否精确的路由匹配（一般来说在路由重定向的时候做精确的路由匹配）
实现步骤三：
在这里插入图片描述

淡若清风_Simple
关注
专栏目录
【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题
miaomiao_666666的博客
12-12 2368
【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题
react学习笔记 react-router-dom react-redux基础使用及手写基础源码 组件反射 react原理
qq_45435203的博客
09-05 378
vdom diff 高效的diff算法 新老vdom树比较 更新只需要更新节点 数据变化检测 batch dom读写 组件多重继承 //parent components export default class Parent extends Component { render(){ return <div> Parent {this._render()} </div> } } //
react-router-dom 之 Link 与NavLink
smaller_coder的博客
11-01 2163
本文主要记录react项目react-router的使用,主要介绍两种，Link 和 NavLink //menuList.js 导航条 import { NavLink ,Link} from 'react-router-dom' <NavLink exact to={childItem.path} data-index={number} className= {store.c...
react-router中Link/的属性详解
11-29
本文主要给大家介绍了关于react-router中 的属性的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 使用Link标签 // 字符串定位描述符 String location descriptor. <Link to="/hello"> Hello </Link> // 对象定位描述符 Object location descriptor. <Link to={{ pathname: '/hello', query: { name: 'ryan' } }}> Hello </Link> // 函数返回定位描述符Function returning location d
react中简单的配置路由
最新发布
kanno的博客
07-22 386
react中简单的配置路由
react-router-dom中link与Navlink
一条宝鱼的专栏
12-14 1179
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。 引用 react-router 　　　　　　 // React Router 核心 react-router-dom 　　　　// 用于 DOM 绑定的 React Router react-router-native 　　// 用于 Re..
React漫漫学习路之 React Router
dingzhengbo69534的博客
11-24 149
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。 引用 react-router 　　　　　　 // React Router 核心 react-router-do...
15行代码实现 React-router-dom 中的 Link 组件
qq_43477721的博客
07-19 273
import React from 'react' import { useHistory } from "react-router-dom" interface LinkProps { to: string; } export const AsLink: React.FC<LinkProps> = ({ children, to }) => { const history = useHistory() return ( <a href={to} onClic
Custom Link
boysky0015的博客
07-19 341
Custom Link /** * Created by mapbar_front on 2019/7/19. */ import React,{Component} from 'react'; import { BrowserRouter as Router, Route, Link, } from 'react-router-dom'; import Home fr...
面试官，别再问我React-Router了！每一行源码我都看过了！React-Router 源码 阅读 react router
cuandeqin2083的博客
03-29 467
前言 此处介绍一下React-Router的核心原理。特别细致的标点符号的不予讨论。 学前小知识 React-Router其实最核心的东西是Route组件和由统一作者开发的History库来建立的。接下来跟着镜头一起走进神秘的ßReact-Router世界吧。 已经知道怎么使用的直接跳过，到下面的源码分析去┗|｀O′|┛ 嗷~~ 简单示例 一起建一个简单的示例吧。先用react官网的create-react-app脚手架弄个react出来。 npx create-react-app my-app cd my
自定义React-Hooks
麦子
12-07 1274
一、React Hooks 1、Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 二、Hooks 优点 1、可以抽离公共方法和逻辑，提高代码的可复用性 2、函数式组件更简洁，开发效率更高 三、自定义 Hook 1、通过自定义 Hook，可以将组件逻辑提取到可重用的函数中 2、自定义 Hook 是一个函数，其名称以use开头，函数内部可以调用其他的Hook 3、初始化项目 create-reac...
cra-ts-pro-reactRouter6-rtk
weixin_57135131的博客
03-06 768
基于react的购物网站后台管理系统保姆级代码
基于业务封装react-router-dom的Link组件
huihui_999的博客
05-17 355
基于业务封装react-router-dom的Link组件
React.js学习（八）、React-router-dom使用（简单使用Link）
黄孝果的博客
02-26 1406
下载react-router-dom npm install --save react-router-dom index.js包裹Router //引入react核心库 import React from 'react' //引入ReactDOM import ReactDOM from 'react-dom' // import {BrowserRouter} from 'react-router-dom' //引入App import App from './App' ReactDOM.re.
React(四)——React 路由（react-router-dom）
黎小小的博客
03-30 2142
目录 1.路由 1.1SPA 1.2SPA 的页面切换机制 1.3后端路由与前端路由 1.3.1后端路由 1.3.2前端路由 1.4React.js 中的路由 2.React Router 2.1基于 Web 的 React Router 2.1.1安装 2.1.2概览 3.基础 3.1应用场景（一） 3.1.1Router 组件 3.1.2Route 组件 3.1...
关于react-router-dom中的Link组件
weixin_30693683的博客
11-28 637
1.NavLink自带一个active类名，可以通过给active添加样式来表示激活状态，，Link没有2.NavLink还有一个exact属性,此属性要求location完全匹配才会附加class和style。这里说的匹配是指地址栏中的URl和这个Link的to指定的location相匹配，而Link不存在 3.NavLink可以使用activeClassName来设置被选中时被附加的class...
React-路由 react-router-dom
廖若星辰-LTY
08-25 6532
React 路由 react-router-dom BrowserRouter Routes Route Link useNavigate useSearchParams useParams useRoutes 声明式导航 编程式导航 路由传参 默认路由 路由嵌套
前端追梦人react-router-dom教程
ilovethesunshine的博客
11-24 975
1. 安装及入门使用 npm install react-router-dom 1.1 HelloWorld import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; export default function App() { return ( <Router> <div>
React 学习笔记 —— 前端路由 react-router-dom 总结
叹之
04-05 375
路由理解 当使用 hash 或 history 的方式去改变网址路径(path)时，并不会刷新网页或发出请求 通过监听 hash 或 history 的变化来动态的切换组件的显示 据此，可以维护 path(路径) 跟 component(组件) 的 一对一的路由 而管理这些route(路由)的就是router(路由器) 简单 demo 主要目录结构 index.js import React from 'react'; import ReactDOM from 'react-dom'; imp
react-router-dom的link
09-28
`react-router-dom`中的`Link`组件是用于在React应用中实现导航的组件。它提供了一种声明式的方式来定义链接，并处理点击链接时的导航操作。你可以使用`Link`组件的`to`属性来指定目标页面的路径，当点击链接时，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值