React-封装NavLink

最新推荐文章于 2025-01-12 10:46:54 发布

原创最新推荐文章于 2025-01-12 10:46:54 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何在React项目中封装自定义的NavLink组件，并展示了两种使用方法。通过继承react-router-dom库中的NavLink组件，可以轻松地为导航链接添加样式及激活状态。

React-封装NavLink

页面1

import MyNavLink from 'mynavlink'
// 方式1
<MyNavLink to="/nav1">菜单1</MyNavLink>

// 方式2 推荐
<MyNavLink to="/nav1" children="菜单1" />

页面MyNavLink

import {NavLink} from 'react-router-dom'
<NavLink className="class1" activeClassName="current" {...this.props}/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TO_WebNow

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react 封装 NavLink

信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀

04-30

390

MyNavLink 文件 —— 封装NavLink import React, { Component } from 'react' import { NavLink } from 'react-router-dom' export default class MyNavLink extends Component { render() { return ( <NavLink activeClassName="atguigu" className="list-group-it

qq_48617322的博客

01-03

1161

2 条评论您还未登录，请先登录后发表或查看评论

react-nav:带有 React 的应用程序导航

06-19

这是一个用 React 制作的基本左侧导航菜单，使用 jspm 作为包管理器。它并不按原样用于生产用途。我只是在玩 React。状态：初步实施完成跑步： git clone repo npm install -g jspm（OS X/Linux 可能需要 sudo，Windows 需要“以管理员身份运行”） cd到文件夹安装 jspm 安装在浏览器中导航到 index.html 在当前的 Chrome、Safari 和 FireFox 中测试。

react-sidenav:基于React的侧边栏导航

05-14

React侧导航 React的侧面导航组件要求 react-sidenav被导出为es模块，因此您需要捆绑程序才能使用它。它也是用Typescript编写的，因此也可以直接与Typescript项目一起使用。对等依赖 React16.8 导航上下文由于当前版本的react-sidenav没有任何固定的渲染模板，因此用户可以自由渲染Nav项目。为了有条件地渲染项目，可以获取包含以下属性的上下文：财产类型描述选定的布尔值如果选择此导航项目 ID 细绳 Nav的id（根据props.id） pathId 细绳路径ID，将为parentId 等级数字导航级别从1开始 isLeaf 布尔值如果为true，则此Nav没有子代以下是有关如何使用它的示例。 const Item = ( ) => { const context = Reac

封装NavLink组件

weixin_45678402的博客

06-07

172

之后可以通过<MyNavLink>直接引用：标签体About和Home也可以通过props传递，props中有一个children属性，该属性的值就是标签体。标签体内容是特殊的标签属性

React - 封装 NavLink 组件

小多的博客

12-27

177

import React, { Component } from 'react' import { NavLink } from 'react-router-dom' export default class MyNavLink extends Component { render() { console.log(this.props) return ( // 其中标签体的是特殊的标签属性，以 children 接收 <NavLink activeClassName = '选中

react-router:react-router 用法及封装路由权限验证高阶组件

04-30

react-router-demo 所有通过路由渲染的组件属性中会多三个属性 history， match， location 可以通过 this.props.history.push('/user/list') 跳转路径 withRouter 把当前组件包装成一个Router组件是一个高阶组件，...

React--》ReactRouter6相关路由的使用讲解

ztK63LrD的博客

01-31

1906

拥抱变化~，一起学习React Router6中路由的变化吧。

react-router-dom v6的基本使用

qq_45750263的博客

12-12

5502

在react中使用react-router

react之NavLink封装

Nuygnix__的博客

01-09

154

如果有多个路由，就要写很多个...重复性的代码，因此需要封装一下。NavLink可以实现路由链接的高亮，通过activeclassName指定样式名。通过this.props.children可以获取标签体内容。标签体内容是一个特殊的标签属性。

封装NavLink

richest_qi的博客

05-19

362

文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx（Home组件）pages/About/index.jsx（About组件）一般组件和路由组件Header/index.jsx（Header组件）App.js（App组件）新增导航与路由Business/index.jsx（Business组件）Employees/index.jsx（Employees组件）Investors/index.jsx（Investors组件）Me

React路由(5)-封装NavLink

Hiroshi's

06-28

172

黄色框内都是重复的，如果很多，那么重复的会更多，所以我们考虑自己封装一个NavLink: 这样就可以了，效果不错但是我们想像NavLink那样，把标题通过标签体传过去给组件：那么这个标签体怎么接受呢？我们把title属性去掉：在MyNavLink中打印一下props: 接着把组件改为自闭和标签，因为会自动帮我们收集children属性： ...

React——NavLink与封装MyNavLink

x1037490413的博客

09-10

220

React-27：NavLink的基本使用

Always-Learning

04-11

667

通过NavLink可以给Link添加类名，从而实现修改样式

NavLink

09-16

309

转载于:https://www.cnblogs.com/InnerPeace-Hecdi/p/9449689.html

React Native Nav: 一款跨平台自定义导航栏组件

gitblog_00757的博客

01-12

442

React Native Nav: 一款跨平台自定义导航栏组件 1. 项目基础介绍与主要编程语言项目名称: React Native Nav 项目简介: React Native Nav 是一款针对 React Native 应用的跨平台导航栏组件。该项目旨在提供一个灵活且易于定制的导航栏解决方案，支持 iOS 和 Android 平台。主要编程语言: JavaScript 2. 项目的核心功...

react-navigation使用

大灰狼的小绵羊哥哥的博客

05-05

3320

1.react-navigation，建立导航页面跳转和搭建TabBar，使用的是React Navigation组件，需要npm install --save react-navigation，页面跳转用 http://www.jianshu.com/p/0014506a9b77 const router = StackNavigator({ 导航页: {

react-navigation 组件详解

huangjianfeng21的博客

07-13

742

react-navigation 介绍随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件react-navigation。 react-navigation的出现替代了Navigator、 Ex-N...

React-Native导航组件React-Navigation的详细介绍

suwu150

10-20

8616

React-Native导航组件React-Navigation的详细介绍一、导航栏分类二、具体说明(一). StackNavigator 导航栏1.5 界面跳转和数据传递(1).navigate()-调用这个方法可以跳转到导航器中的其他页面(2) goBack() -关闭当前活跃屏,相当于功能(3)addListener() – 订阅导航生命周期事件变化(4) isFocused() – 查看屏的聚焦状态(5)state – 屏幕的当前状态/路由。

react.NavLink的封装