封装NavLink

最新推荐文章于 2023-03-07 19:27:39 发布
最新推荐文章于 2023-03-07 19:27:39 发布
阅读量261 收藏
点赞数
分类专栏： React17/18 文章标签： NavLink 封装NavLink children react组件 标签体内容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/124863839
版权

文章目录

基本路由的使用

在这里插入图片描述

本篇的vue项目，代码涉及的主要文件有：

  1. 模板文件index.html
  2. 入口文件index.js
  3. 入口组件App.js
  4. 路由组件Home：pages/Home/index.jsx
  5. 路由组件About：pages/About/index.jsx

模板文件index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

入口组件App.js

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Home}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

pages/Home/index.jsx（Home组件）

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
        <h2>我是Home的内容</h2>
    )
  }
}

pages/About/index.jsx（About组件）

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
        <h2>我是About的内容</h2>
    )
  }
}

一般组件和路由组件

路由组件，放在pages文件夹下。
一般组件，放在components文件夹下。

不妨把Vue Router Demo这部分封装成一个一般组件，于是，在src下新建文件夹：components，components下新建：Header/index.jsx，即Header组件。

代码变更涉及的文件有：

  1. components/Header/index.jsx，即Header组件
  2. App.js，即App组件

Header/index.jsx（Header组件）

import React, { Component } from 'react';

export default class Header extends Component {
    render() {
        return (
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>Vue Router Demo</h2></div>
                </div>
            </div>
        );
    }
}

App.js（App组件）

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Header from "./components/Header";

export default class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route exact path="/home" component={Home}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

新增导航与路由

以上路由实例，导航栏有：Home、About，现在需新增如下导航及其展示内容：

  • Business（业务），/business->Business组件
  • Employees（员工），/employees->Employees组件
  • Investors（投资者），/investors->Investors组件
  • Media（媒体），/media->Media组件

代码变更涉及的文件有

  1. pages文件夹下新增：Business/index.jsx，即Business组件
  2. pages文件夹下新增：Employees/index.jsx，即Employees组件
  3. pages文件夹下新增：Investors/index.jsx，即Investors组件
  4. pages文件夹下新增：Media/index.jsx，即Media组件
  5. 修改App.js，变更部分：路由链接、路由注册。

Business/index.jsx（Business组件）

import React, { Component } from 'react'

export default class Business extends Component {
  render() {
    return (
        <h2>我是Business的内容</h2>
    )
  }
}

Employees/index.jsx（Employees组件）

import React, { Component } from 'react'

export default class Employees extends Component {
  render() {
    return (
        <h2>我是Employees的内容</h2>
    )
  }
}

Investors/index.jsx（Investors组件）

import React, { Component } from 'react'

export default class Investors extends Component {
  render() {
    return (
        <h2>我是Investors的内容</h2>
    )
  }
}

Media/index.jsx（Media组件）

import React, { Component } from 'react'

export default class Media extends Component {
  render() {
    return (
        <h2>我是Media的内容</h2>
    )
  }
}

App.js

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Business from "./pages/Business";
import Employees from "./pages/Employees";
import Investors from "./pages/Investors";
import Media from "./pages/Media";
import Header from "./components/Header";

export default class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/business">Business</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/employees">Employees</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/investors">Investors</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/media">Media</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route exact path="/home" component={Home}></Route>
                <Route exact path="/business" component={Business}></Route>
                <Route exact path="/employees" component={Employees}></Route>
                <Route exact path="/investors" component={Investors}></Route>
                <Route exact path="/media" component={Media}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

封装NavLink

封装NavLink的第一种方式

components下新建：MyNavLink/index.jsx，用于封装NavLink。
代码变更涉及的文件有：

  1. components/MyNavLink/index.jsx，即MyNavLink组件
  2. App.js，即App组件

MyNavLink/index.jsx（MyNavLink组件）

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class index extends Component {
  render() {
    const {title,...theOtherProps} = this.props;
    return <NavLink  className="list-group-item" activeClassName='active' {...theOtherProps}>{title}</NavLink>
  }
}

App.js（App组件）


import React, { Component } from 'react'
import {Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Business from "./pages/Business";
import Employees from "./pages/Employees";
import Investors from "./pages/Investors";
import Media from "./pages/Media";
import Header from "./components/Header";
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to="/about" title="About"/>
              <MyNavLink to="/home" title="Home"/>
              <MyNavLink to="/business" title="Business"/>
              <MyNavLink to="/employees" title="Employees"/>
              <MyNavLink to="/investors" title="Investors"/>
              <MyNavLink to="/media" title="Media"/>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route exact path="/home" component={Home}></Route>
                <Route exact path="/business" component={Business}></Route>
                <Route exact path="/employees" component={Employees}></Route>
                <Route exact path="/investors" component={Investors}></Route>
                <Route exact path="/media" component={Media}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

封装NavLink的第二种方式

代码变更涉及的文件有：

  1. components/MyNavLink/index.jsx，即MyNavLink组件
  2. App.js，即App组件

MyNavLink/index.jsx（MyNavLink组件）

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class index extends Component {
  console.log(this.props);
  render() {
    return <NavLink  className="list-group-item" activeClassName='active' {...this.props}/>
  }
}

App.js（App组件）

import React, { Component } from 'react'
import {Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Business from "./pages/Business";
import Employees from "./pages/Employees";
import Investors from "./pages/Investors";
import Media from "./pages/Media";
import Header from "./components/Header";
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
              <MyNavLink to="/business">Business</MyNavLink>
              <MyNavLink to="/employees">Employees</MyNavLink>
              <MyNavLink to="/investors">Investors</MyNavLink>
              <MyNavLink to="/media">Media</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route exact path="/home" component={Home}></Route>
                <Route exact path="/business" component={Business}></Route>
                <Route exact path="/employees" component={Employees}></Route>
                <Route exact path="/investors" component={Investors}></Route>
                <Route exact path="/media" component={Media}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

React组件的标签体内容是一个特殊的标签属性：children。

看下console控制台打印出的东西就知道了，如下。
在这里插入图片描述

richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第三十二章 React路由组件的简单使用
天界程序员的博客
05-10 1587
关于路由组件的一些使用以及它们之间的区别，以及编程式的路由使用
第三方导航库vue-navigation的使用
黑玫瑰
03-10 7848
实现前进刷新，后退不刷新。 前进、后退分别使用不同的过场动画。 什么是 vue-navigation? （1）vue-navigation 是一个基于 vue 与 vue-router 的第三方导航库。 （2）与 keep-alive 相似，vue-navigation 可以保存页面状态。 （3）比 keep-alive 强的是，vue-navigation 保存状态是可以识别路由的前进后退的。其导航默认行为类似手机 APP 的页面导航（假设 A、B、C 为页面）： A 前进到 B，再前进到 C； C.
React——NavLink与封装MyNavLink
x1037490413的博客
09-10 175
NavLink
weixin_43613849的博客
10-31 2703
1、NavLink的基本使用 在前面一个笔记中，我们使用的Link这个组件，它有一个缺点是，如果我们需要给选中的路由设置高亮怎么办？这个时候我么可以用比Link更加方便的NavLink 引入NvaLink import { NavLink } from 'react-router-dom' 但是如果想自定义高亮的css怎么办呢？ 添加activeClassName，并且定义样式 2、普通组件和路由组件区别 1.写法不同： 一般组件：<De...
基于Nodejs+vue开发实现高校学院网站系统
BS009的博客
10-31 2540
本项目基于纯前端技术为学院开发实现了一个学院网站系统，界面美观大方，采用Nodejs+Vue+ElemenetUI开发实现，主要包含：首页展示、系部新闻、系部概况、教学科研、党建工作、学生工作、招生就业、教师风采、制度建设、技能竞赛、学院首页等功能模块。语言环境：nodejs数据库：无应用服务器：nodejs开发工具：IDEA或vscode开发技术：nodejs+vue+elementUI。
react-router:react-router 用法及封装路由权限验证高阶组件
04-30
react-router-demo 所有通过路由渲染的组件属性中会多三个属性 history， match， location 可以通过 this.props.history.push('/user/list') ...NavLink NavLink 有个默认功能，自动为点击的添加一个class=“active”
react-epic:浏览地址：
05-06
Link（/NavLink） 用作路由跳转，相当于链接。路由官方给 React-Router 的主要成分：路由器(routers)： , 路线匹配者(route matchers): , 导航,也叫路线更改者(navigation): <Link>, <Na
react-section-navigation
05-06
在React中，我们可以创建一个自定义Hook，如`useIntersectionObserver`，来封装Intersection Observer的功能。这个Hook接受一个元素引用和一些配置选项，然后返回一个布尔值，指示元素是否在视口中。以下是一个基本...
导航栏jquery
05-07
通过编写和封装这样的插件，我们可以提高代码复用性，使得导航栏功能在多个页面间保持一致性和易维护性。在实际开发中，还可以根据项目需求进行扩展，比如添加过渡效果、添加自定义事件等，进一步提升用户体验。
zou_react_project:电商后台管理项目
05-22
创建`Switch`、`Route`和`NavLink`来定义不同的页面路由和导航链接。 3. **动态路由**： 使用`/:id`这样的通配符处理动态参数，实现如商品详情页根据ID展示不同商品的功能。 4. **路由保护**： 通过`Route`的`...
React - 路由 NavLink 使用 与 NavLink 组件封装使用（路由高亮）
技术共享，共同进步！
08-01 1001
React - 路由 NavLink 使用 与 NavLink 组件封装使用（路由高亮）
前端学习案例-自定义navLink&自定义导航1
qq_41632427的博客
03-07 128
前端
封装NavLink组件
weixin_45678402的博客
06-07 120
之后可以通过<MyNavLink>直接引用： 标签体About和Home也可以通过props传递，props中有一个children属性，该属性的值就是标签体。 标签体内容是特殊的标签属性
React手册之Link和NaviLink区别
weixin_43732512的博客
11-21 1228
Link:点击是url会直接更新，组件会重新渲染而不是重新加载 它可以是对象也可以是字符串但是最后都会转为location对象的 点击Link后，路由系统发生了什么？ Link 组件最终会渲染为 HTML 标签 <a>虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截 浏览器的默认行为，然后调用了history.pushState 方法（注意，文中出现的 history ...
React Router中Link和NavLink的学习总结
热门推荐
冰雪为融的博客
05-18 4万+
Link现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了&lt;Link&gt;组件用来避免这种状况发生。当 你点击&lt;Link&gt;时，url会更新，组件会被重新渲染，但是页面不会重新加载嗯、先看个例子import {Link} from 'react-router-dom'; const Header = ()=&gt...
vue项目nav导航栏的实现
王永存
09-20 3万+
每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。 最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图： 首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。 先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav
react-router的使用（二）——NavLink的使用、Switch的作用、Redirect
zep
02-06 2926
一、NavLink的使用 需求：路径选中时，对应的a元素变为红色 这个时候，我们要使用NavLink组件来替代Link组件： activeStyle：活跃时（匹配时）的样式； activeClassName：活跃时添加的class； exact：是否精准匹配； 但是，我们会发现在选中about或profile时，第一个也会变成红色： 原因是/路径也匹配到了/about或/profile； 这个时候，我们可以在第一个NavLink中添加上exact属性； 默认的activeClassName： 事
MAVLink v1.0详解和2.0介绍
嵌入式与人工智能
05-16 8342
本文针对 MAVLink v1.0版本，协议版本：3。 　　MAVLink是为微型飞行器MAV（Micro Air Vehicle）设计的（LGPL）开源的通讯协议。是无人飞行器和地面站（Ground Control Station ，GCS）之间，以及无人飞行器之间通讯常用的协议。APM、PIXHAWK飞控，Mission Planner、QGroundControl地面站均使用了MAVLin...
mavlink协议详解_MAVLink通讯协议在STM32上移植，并自定义协议
weixin_35470511的博客
02-07 3285
mavlink全称是(Micro Air Vehicle Message Marshalling Library)，从名字可以看出，mavlink是主要面向飞控的一种开源通信协议。因此它默认定义了很多适用于飞控的信息格式，比如heartbeat(心跳信号，每隔一两秒主从通信一次，以验证通信是否正常)。首先要说明的是，mavlink作为一个非常可靠(至少两字节校验)、支持类型丰富(message I...
Vue NavLink
最新发布
03-22
Vue NavLink 是 Vue.js 框架中的一个组件，它用于创建带有活动 CSS 类的链接，以便在导航栏中高亮显示当前页面。您可以使用 Vue NavLink 来创建导航菜单，以便用户可以轻松地浏览您的网站。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值