NavLink及其封装,Switch

已于 2024-10-11 13:50:12 修改
阅读量195 收藏
点赞数 1
分类专栏： react 文章标签： react.js
于 2024-10-11 13:34:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61265297/article/details/142851469
版权

可以给选中导航栏的高亮

使用类名

activeClassName=''

封装NavLink组件

导航的名字，可以直接写在组件身上

传的标签体值，在children中，可以直接使用

写法1

写法2，

标签体内容是一个特殊的标签属性，可以通过this.props.children获取。因此以下两段代码是等价的
<NavLink activeClassName="atguigu" className="list-group-item" children="About" />

<NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink>

Switch

假如不加的话，假如匹配到多个，就会展示多个，假如加上就只展示符合的第一个

注册路由时用Switch包裹所有路由
通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。

加上的效果

不加的效果，匹配到两个，都展示了

前端大厂常见面试题目|react|5-reacr ajax,axios,消息订阅发布机制，react-routerdom的api，基本路由使用，rdirct,antd，navlink,switch,
VAN
04-21 103
GET请求2）POST请求P65-配置多个代理，可以灵活的控制请求是否代理配置繁琐，前端请求资源的时候必须加前缀src配置代理App…获取用户的输入，连续解构赋值+重命名，corsjs searchjQuery发送请求容易产生毁掉低于axios请求地址:home/HomeHomeAbouot编写路由链接，路由链接引起路由的变化明确好界面的导航区，展示区导航区的a标签改为link标签pages明确导航区和展示区导航区的a标签改为link标签。
React学习day9-NavLink、路由、params、search、state
weixin_46758732的博客
06-19 654
封装NavLink NavLink可以实现路由链接的高亮，通过activeClassName指定 标签体内容是一个特殊的标签属性 通过this.props.children可以获取标签体内容 App.js <MyNavLink to="/about" >About</MyNavLink> <MyNavLink to="/home">Home</MyNavLink> {/*注册路由*/} <Route path=
【react-router-dom5】使用NavLink组件同时设置className默认样式和activeClassName选中样式，选中样式不生效的解决方法
最新发布
zlting_的博客
02-21 348
前提：在做React项目时，发现使用NavLink同时设置className默认样式和activeClassName选中样式，选中样式不生效问题。
使用react-router-dom中的＜NavLink＞activeClassName报错
chloecode的博客
12-09 1121
需求：点击对应按钮实现高亮 报错代码： demo是高亮对应的样式类名 <NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink> <NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink> 报错信息： 说react.
路由链接高亮（二）——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式
weixin_44867717的博客
06-20 1892
路由链接高亮——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式 NavLink 相当于 Link 组件，但是，它自带高亮类名 可以通过 activeClassName 来修改默认的高亮类名 也可以通过activeStyle 来动态添加选中的样式 src/views/Footer.js <NavLink activeClassName="todos-active" to="/all"
使用react-router-dom中的＜NavLink＞activeClassName样式不生效
sinat_15625949的博客
11-05 2797
问题 使用react-router-dom中的<NavLink>切换页面时activeClassName样式不生效 原因 本地react-router-dom包已经更新到最新6.0.0-beta.8版本，beta版本不稳定 解决方法1 由于beta版本不稳定，建议回到稳定版本V5.3.0 解决方法2 使用最新版本react-router-domV6.0.0以上，可以通过className和style属性进行修改active状态。 两个属性都是通过箭头函数接收到isAc
React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题
weixin_30316097的博客
01-25 1207
首先 导航链接应该使用NavLink而不再是Link NavLink使用方法见https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md NavLink和PureComponent一起使用的时候，会出现 激活链接样...
React学习（路由封装和路由高级封装）
城南的夏 的博客
05-21 1593
学习目标： 提示：路由封装和路由高级封装 （1） 路由封装 将一级路由，通过router/RouterView.jsx组件进行封装 新建router目录，在目录下新建RouterView.jsx /** * 路由封装 */ import {lazy, Suspense} from "react" import {Redirect, Route, Switch} from "react-router-dom" //使用懒加载 导入一级路由 const Layout = lazy(() =>im
React：react-router动态路由的使用及项目封装路由全过程
热门推荐
JCat的博客
08-26 1万+
一、路由 1.安装 npm install --save react-router npm install --save react-router-dom //使用react-router5以上版本 2. 语法参考文档 react-router-cn：github文档 react-router官方学习文档 router语法学习 3. 路由的作用 单页面刷新（SPA），切换显示视图 初步使用方式：src/app.jsx页面 import React, { Component } from 'react'
react 路由封装
08-24
React 路由的封装可以通过使用第三方库来实现，最常用的是 React Router。React Router 是一个用于构建单页面应用的路由库，它提供了一些组件和 API，可以让你在 React 应用中实现路由功能。 下面是一个简单的例子...
React学习15（NavLink的基本使用与封装）
xiaojian044的博客
12-16 700
NavLink的基本使用与封装
React - 路由 NavLink 使用 与 NavLink 组件封装使用（路由高亮）
技术共享，共同进步！
08-01 1204
React - 路由 NavLink 使用 与 NavLink 组件封装使用（路由高亮）
react 编程式导航和声明式导航
前端、python爱好者
11-23 3276
其中Link组件的导航方式和HMTL中的a标签类似，在react将虚拟DOM渲染成真实DOM后，Link组件也被渲染成了a标签。这个属性的唯一缺点就是使用时需要在已注册的路由组件中使用，如果该组件不是路由组件，则props对象中将不会有需要使用的路由参数（如果父组件没有给子组件传参，props会是一个空对象）。：该方法使用push进去的路由需要是已经在Route组件中注册的路由，如果路由未注册，则无法跳转。在类式组件中使用props时的事件方法，需要写成箭头函数，避免造成this指向不正确的问题。
navlink
wkktzj的博客
09-23 413
import React from 'react' import { NavLink, Route } from "react-router-dom"; import './App.scss' import About from "./pages/About"; import Home from './pages/Home'; export default function App() { return ( App {/
React 中NavLink 的使用
weixin_45677987的博客
07-06 3805
React 框架中 NavLink 的使用: 通过NavLink可以给Link添加类名，从而实现修改样式 <Nav-Link activeClassName="my-active"className="nav-link" to="/home" component={Home}> 未按待续.....
0603基础使用（二）-react路由-react
gaogzhen的博客
04-26 535
0603基础使用（二）-react路由-react
NavLink与NavLink的封装
qq_39840183的博客
08-06 849
关于NavLink： NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 标签体内容是一个特殊的标签属性 通过this.props.children可以获取标签体内容 <NavLink>比<Link>更高级一点，可以使谁点哪个就会给哪个追加一个active属性，也可以通过activeClassName属性来重新设置样式，加上!import 封装NavLink： 优化后的代码： 封装的NavLink组件：
react-router的使用（二）——NavLink的使用、Switch的作用、Redirect
zep
02-06 3324
一、NavLink的使用 需求：路径选中时，对应的a元素变为红色 这个时候，我们要使用NavLink组件来替代Link组件： activeStyle：活跃时（匹配时）的样式； activeClassName：活跃时添加的class； exact：是否精准匹配； 但是，我们会发现在选中about或profile时，第一个也会变成红色： 原因是/路径也匹配到了/about或/profile； 这个时候，我们可以在第一个NavLink中添加上exact属性； 默认的activeClassName： 事
react路由的基本使用
weixin_50379372的博客
06-22 350
路由两种模式BrowserRouter和HashRouter总结。路由组件传参（query/search）路由组件push和replace的使用。路由组件传参（params）路由组件传参（state）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值