第十节:React路由:react-router认识与基本使用

news2024/11/24 14:53:29
1. React Router的理解

React的路由根据项目的不同使用不同的路由库,web应用主要使用react-router和react-router-dom

react-router和react-router-dom的区别

  1. react-rotuer 核心库,提供了一些核心的api,但是没有提供dom操作进行跳转的api
  2. react-router-dom扩展了核心库,提供了一些操作DOM的api,
  3. web应用正常使用react-router-dom就可以了, 因为它自己同样依赖react-router


2. 路由组件认识
2.1 路由组件的认识

在react中和vue不同的是,路由不是配置的文件,而是组件, 正常的组件嵌套使用

在React router中通常使用的组件有三种

  1. 路由器组件: 如BrowserRouter(history模式) 和 HashRouter(hash模式)
  2. 路由匹配组件: Route 和 Switch 组件
  3. 导航组件: Link 和 NavLink 组件


2.2. 相关API
<BrowserRouter>    // 路由器组件
<HashRouter>       // 路由器组件
<Route>            // 显示路由组件,嵌套在路由器组件中
<Switch>           // 路由切换组件,如果配置成功多个路由也只会显示第一个
<Link>             // 路由导航组件
<NavLink>          // 路由导航组件
<Redirect>         // 路由重定向组件


3. 路由组件的使用
3.1 下载路由组件库
$ npm install react-router-dom --save

## or

$ yarn add react-router-dom


3.2 路由器组件的使用
3.2.1 路由器组件说明:
  1. 每一个React Router应用程序的核心都应该是路由器组件
  2. react-router-dom提供了BrowserRouter和HashRouter
  3. BrowserRouter采用常规路径显示方式的history路由显示模式
  4. HashRouter采用锚点显示的hash路由显示模式


3.2.2 BrowserRouter组件的使用

基本使用

采用history路由模式显示路由


示例代码:

// 导入路由器
import {BrowserRouter} from "react-router-dom"

// 使用路由器组件嵌套根组件APP
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

为什么使用BrowserRouter嵌套根组件APP呢?

其实没有说一定要嵌套APP根组件, 只是导航组件和路由组件必须嵌套的路由器组件中才会有效,否则就会报错

因此只要在你是用的导航组件和路由组件外嵌套即可, 嵌套根组件表示整个应用任何位置都可以是使用路由组件


BrowserRouter路由器采用history前端路由模式, 因此在路径显示上没有#

如下:

http://localhost:3000/goods


3.2.3 HashRouter组件的使用

HashRouter采用hash模式的前端路由, 以此会出现#/home

示例代码:

// 导入路由器
import {HashRouter} from "react-router-dom"

// 使用路由器组件嵌套根组件APP
ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>,
    document.getElementById('root')
);

路径显示结果:

http://localhost:3000/#/goods


3.2.4 路由器的别名使用

有的时候会将路由器组件在使用import导入是修改别名

示例代码如下

// 将HashRouter 路由器组件修改为别名Router使用
import {HashRouter as Router} from "react-router-dom"

// 使用路由器组件的别名
ReactDOM.render(
        <Router>
            <App />
        </Router>,
    document.getElementById('root')
);


3.3 路由匹配组件的使用
3.3.1 路由匹配组件Route的使用

Route组件用来控制路径对应显示的组件

说明:

  1. Route组件基本的两个属性,一个是path,一个是component
  2. path属性表示用来匹配路径,党路径匹配成功后展示component的内容
  3. component属性值是将来用于展示的组件


示例代码如下:

import {Route, Link} from 'react-router-dom'
// 导入组件
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

// App组件
function App() {
    return (
        <div className="App">
            
            {/* 
                Route路由展示组件
                当path的值和路径匹配成功后显示component对应的组件
            */} 
            <Route path="/home" component={Home}/>
            <Route path="/goods" component={Goods}/>
            <Route path="/about" component={About}/>
        </div>
    );
}

示例代码说明:

  1. 上面的示例代码,在默认打开是不显示任何组件内容,
  2. 默认打开的路径为/所以Route中的路径都匹配不成功
  3. 如果希望/路由对应的显示内容也为首页, 就可能会如下写法


示例代码

import {Route, Link} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">

            <Route path="/home" component={Home}/>
            <Route path="/goods" component={Goods}/>
            <Route path="/about" component={About}/>
            <Route path="/" component={Home}/>
        </div>
    );
}

示例代码说明:

  1. 示例的本意是希望/home和/路径都展示首页组件,/表示默认打开显示首页
  2. 但是示例真实的情况是,无论/home,/goods,/about路径,最后一个/Route都会展示
  3. 这样就导致了页面会同时渲染两个组件,


3.3.2 Switch组件

Switch组件说明:

  1. Switch组件用于包裹Route组件, 表示只会渲染第一个与路径配置成功的Route组件对应的内容
  2. 如果有两个组件都匹配路径都成功,也只会显示第一个,
  3. 或者显示Redirect重定向组件内容
  4. 也就是说路径只会匹配到第一个成功的Route就不会在下匹配其他Route组件了,
  5. 如果不使用Switch组件,则会将所有Route组件都匹配一下,所有匹配成功的组件都会展示


示例代码如下

import {Route, Link,Switch} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
            </Switch>
        </div>
    );
}

示例说明:

  1. 这样就解决了之前存在的问题
  2. 当路由为/时匹配最后一个Route,因此展示首页
  3. 如果当路由匹配到/goods,展示商品页,此时会中断匹配, 也就不会匹配到/,此时也不会再次展示一个首页组件


3.4 导航组件
3.4.1 导航组件说明:
  1. 导航组件的作用是用来点击跳转路由,为Link和NavLink
  2. Link组件和NavLink组件的区别在于时候会添加额外的类名
  3. Link组件在跳转路由时,当前活跃的导航不会添加任何类名
  4. NavLink跳转路由,会给当前活跃的导航添加额外的类名,可以利用类名添加不同的样式


3.4.2 Link组件的使用

Link组件有一个to属性, 有来指定跳转到那个路由

示例代码如下:

import {Route, Link,Switch} from 'react-router-dom'


import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">
            <Link to="/home">首页</Link>
            <Link to="/goods">商品页</Link>
            <Link to="/about">关于页</Link>

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
            </Switch>

        </div>
    );
}

示例说明:

  1. Link标签会被编译为a标签
  2. to属性表示当你点击时,跳转到那个路由上
  3. 但是不会添加任何额外的类名

控制台Elements里展示的内容

<div class="App">
    <a href="#/home">首页</a>
    <a href="#/goods">商品页</a>
    <a href="#/about">关于页</a>
    <div>这是首页</div>
</div>

因此没发确定当前那个导航对应的路由是活跃状态


3.4.3 NavLink 组件的使用

NavLink会给当前活跃的路径导航添加额外的类名, 利用添加给导航添加不同的样式

因此NavLink组件使用相对较多

示例代码:

import {Route, NavLink,Switch} from 'react-router-dom'

import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">
            <NavLink to="/home">首页</NavLink>
            <NavLink to="/goods">商品页</NavLink>
            <NavLink to="/about">关于页</NavLink>

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
            </Switch>

        </div>
    );
}

示例显示后的Elements结果

<div class="App">
    <a href="#/home">首页</a>
    <a href="#/goods" aria-current="page" class="active">商品页</a>
    <a href="#/about">关于页</a><
    div>商品页面</div>
</div>

此时会发现,当前展示的是商品页面, 对应的导航会有一个额外的类名activ

因此可以利用active给当前显示的导航添加不同的样式

.active{
    color:red;
}


3.5 路由重定向组件的使用

路由重定向 Redirect 组件使用说明

  1. Redirect组件可以在所有路由都匹配不成功后,默认跳转展示的内容,如访问的路由不存在,展示首页
  2. Redirect组件也可以在路由匹配成功后,验证权限, 不足的跳转指定路由, 如登录账号不存在跳转注册

示例代码:

import {Route, NavLink,Switch,Redirect} from 'react-router-dom'


import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"

function App() {
    return (
        <div className="App">
            <NavLink to="/home">首页</NavLink>
            <NavLink to="/goods">商品页</NavLink>
            <NavLink to="/about">关于页</NavLink>

            <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/about" component={About}/>
                <Route path="/" component={Home}/>
                {/* 使用路由重定向, 当路由匹配不成功时,显示首页 */}
                <Redirect to="/home" />
            </Switch>

        </div>
    );
}


3.6 withRouter组件的使用
3.6.1 withRouter组建了解
  1. withRouter为高阶组件,其实就是一个函数,参数是一个组件, 返回值也是一个组件
  2. 正常的路由组件都能在props属性接受和路由有关的match,location,history对象
  3. 如果是非路由组件不能在props属性中获取这些路由对象,如果需要在非路由组件中使用路由对象内容
  4. 就需要给非路由组件嵌套一个WitchRouter高级组件,

因为WitchRouter组件就是为了让非路由组件也能访问路由对象的高阶组件


3.6.2 未使用withRouter

非路由组件中获取props

export default class Header extends Component {

    render() {
        console.log(this.props);
        /*
       打印结果:
       {}
      */

        return (
            <h2>应用的头部</h2>
        );
    }
}

路由组件中获取props

export default class Home extends Component {

    render() {
        console.log(this.props);
        /*
        打印结果:
            {
                history: {...},
                location:{...},
                match:{...},
            }
        */
        return (
            <div>
                这是首页
            </div>
        );
    }
}


3.6.3 使用withRouter

使用withRouter执行,传入非路由组件

import React, { Component } from 'react';

// 引入高级组件
import { withRouter } from 'react-router-dom'
class Header extends Component {

    render() {
        console.log(this.props);
        /*
        打印结果:
            {
                history: {...},
                location:{...},
                match:{...},
            }
        */
        return (
            <h2>应用的头部</h2>
        );
    }
}

/*
 使用高级组件, withRouter的参数是Header组件,
 返回一个处理后的组件
*/
export default withRouter(Header)

此时非路由组建的props属性中就可以获取到路由组件才能获取到的history,math,location对象

© 著作权归作者所有,转载或内容合作请联系作者


喜欢的朋友记得点赞、收藏、关注哦！！！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Edge TTS

Edge TTS

edge-tts项目地址&#xff1a;https://github.com/rany2/edge-tts 1.安装部署 在cmd中运行以下命令安装edge-tts pip install edge-tts pip install edge-tts速度非常快&#xff0c;几秒钟就安装完成了。 2.文本转语音 输入以下命令&#xff0c;将一段英文转为音频。 edg…
阅读更多...
Linux——传输层协议

Linux——传输层协议

目录 一再谈端口号 1端口号范围划分 2两个问题 3理解进程与端口号的关系 二UDP协议 1格式 2特点 3进一步理解 3.1关于UDP报头 3.2关于报文 4基于UDP的应用层协议 三TCP协议 1格式 2TCP基本通信 2.1关于可靠性 2.2TCP通信模式 3超时重传 4连接管理 4.1建立…
阅读更多...
RocketMq的学习

RocketMq的学习

1.mq的秒杀场景 2.mq产品的选型
阅读更多...
基于SpringBoot的校园兼职管理系统

基于SpringBoot的校园兼职管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…
阅读更多...
solidity中的mapping以及Memory，Storage Calldata

solidity中的mapping以及Memory，Storage Calldata

1.Memory&#xff0c;Storage & Calldata 在 Solidity 中&#xff0c;有以下几种数据存储位置&#xff1a; 栈&#xff08;Stack&#xff09;&#xff1a;栈是一种临时存储区域&#xff0c;用于存储局部变量和函数参数。在函数执行期间&#xff0c;栈上的数据会被分配和释…
阅读更多...
探索光耦：光耦——电动自行车安全与智能的坚实保障

探索光耦：光耦——电动自行车安全与智能的坚实保障

随着电动自行车市场的蓬勃发展&#xff0c;如何提升其安全性、可靠性和智能化水平已成为行业关注的焦点。在众多关键元件中&#xff0c;光电耦合器&#xff08;简称光耦&#xff09;正以其独特的功能&#xff0c;成为电动自行车设计中的关键角色。下面&#xff0c;让我们一同探…
阅读更多...
Ubuntu22.04阿里云服务器 Gitlab搭建CICD

Ubuntu22.04阿里云服务器 Gitlab搭建CICD

gitlab搭建cicd流水线教程 1、阿里云申请免费云盘 申请免费云盘用于创建gitlab 申请方法百度 2、安装gitlab-ce 更新系统&#xff1a; sudo apt update sudo apt upgrade -y 安装必要的依赖&#xff1a; sudo apt install -y curl openssh-server ca-certificates pos…
阅读更多...
【云原生】Helm资源清单管理工具

【云原生】Helm资源清单管理工具

资源清单管理工具-Helm 文章目录 资源清单管理工具-Helm资源列表基础环境一、Helm的介绍1.1、Helm的价值概述1.2、Helm的关键名词 二、安装部署Helm2.1、解压安装包2.2、添加命令补全设置 三、使用Helm部署服务管理3.1、使用Helm创建chart3.2、响应式创建名称空间3.3、安装char…
阅读更多...
基于Arduino的植物状态监测系统

基于Arduino的植物状态监测系统

Arduino植物监测/浇水系统 本项目的3D打印及源码开源&#xff0c;可以私信我进行获取 简介 大家好&#xff0c;今天我将向大家介绍一个非常有趣的项目——Arduino植物监测/浇水系统。这个项目利用一些传感器来观察土壤的状况&#xff0c;并根据这些读数来判断植物是否需要浇…
阅读更多...
异构环境下统一授权管理系统的兼容性具体如何实现？

异构环境下统一授权管理系统的兼容性具体如何实现？

在异构环境中&#xff0c;由于不同系统的差异性&#xff0c;实现统一授权管理面临诸多挑战。其中&#xff0c;兼容性问题是关键之一。兼容性的实现不仅关系到不同系统之间的协同工作&#xff0c;还直接影响到整个管理系统的效率和稳定性。 异构系统带来的挑战 异构系统的存在…
阅读更多...
手写mybatis之通过注解配置执行SQL语句

手写mybatis之通过注解配置执行SQL语句

前言 可能领导也都觉得可能就是码农不爱说话&#xff0c;其实不爱说话是一方面&#xff0c;但还有另外一方面是有些领导对于码农提出的问题&#xff0c;给出的回复往往是&#xff1a;“你提出这个问题&#xff0c;你就要给出这个问题的解决办法&#xff01;” 所以不同的岗位要…
阅读更多...
AD24之铺铜操作

AD24之铺铜操作

1.选择板框&#xff0c;即机械1层&#xff0c;转换为覆铜 这样顶层就铺好了&#xff0c;还需要铺底层 2.打开底层&#xff0c;选择板框&#xff0c;转换为铺铜&#xff0c;然后给铜皮添加网络和层&#xff0c;最后是铺铜 注意&#xff1a;None铺铜是无效果的&#xff0c;要Ha…
阅读更多...
2.使用 Label Studio 标注文本

2.使用 Label Studio 标注文本

使用 Label Studio 标注文本 文章目录 使用 Label Studio 标注文本前言Label Studio的简单使用1.创建项目2.添加本地存储3.选择标注模板4.添加数据5.标注6.添加关系 总结 前言 Label Studio是一个开源的功能强大的标注平台&#xff0c;可以标注视频&#xff0c;图片&#xff0…
阅读更多...
一个新韭菜的炒股心得

一个新韭菜的炒股心得

一个新韭菜的炒股心得 前言 股市其实是一场修行。时刻控制人性的弱点。所以量化优势明显&#xff0c;它没有情绪&#xff0c;可以随意止盈止损。我从一个小白一路走过来&#xff0c;发现A股里有学不完的知识,有做不完的功课。我的主要关注点在如何有效实现价值投资(价值投资在…
阅读更多...
算法: 位运算题目练习

算法: 位运算题目练习

文章目录 位运算判定字符是否唯一丢失的数字两整数之和只出现一次的数字 II消失的两个数字常见位运算总结 位运算 判定字符是否唯一 有很多解法,比如hash表,或者给字符串排个序,然后遍历… 写这道题时没注意到如果出现奇数个相同字符,此时就应该返回false了. 而不是全部放到位…
阅读更多...
智慧高铁站的概念与优势

智慧高铁站的概念与优势

1. 概念介绍 智慧高铁站是指利用先进的信息技术和智能化手段&#xff0c;对高铁站的运营管理、服务功能、安全保障等方面进行全面升级和优化的现代化交通枢纽。通过数字化、网络化和智能化技术的应用&#xff0c;实现高铁站的智能化管理、便捷化服务和可持续发展&#xff0c;从…
阅读更多...
【Linux】Linux进程基础

【Linux】Linux进程基础

1.进程介绍与概念 进程的本质是在计算机内存中运⾏的程序&#xff0c;但是这⼀个概念太过于⼴泛 每个应用程序运行于现代操作系统之上时&#xff0c;操作系统会提供一种抽象&#xff0c;好像系统上只有这个程序在运行&#xff0c;所有的硬件资源都被这个程序在使用。这种假象…
阅读更多...
ui自动化知识点-web端

ui自动化知识点-web端

UI &#xff1a; User Interface( ⽤户接⼝ - ⽤户界⾯ ) &#xff0c;主要包括&#xff1a; app 、 web ui ⾃动化测试&#xff1a;使⽤⼯具或代码执⾏⽤例的过程 什么样的项⽬适合做⾃动化&#xff1a;1、需要回归测试项⽬&#xff08;甲⽅⾃营项⽬、⾦融、电商&#xff09…
阅读更多...
鸿蒙开发 三十七 ArkTs类 class 构造函数

鸿蒙开发 三十七 ArkTs类 class 构造函数

语法格式如下&#xff1a; class 类名{ 字段1:类型 字段2:类型 constructor(参数...) { this.字段 参数 } } 实例化&#xff1a; const 实例1 new 类名(参数...&#xff09;每new一次就去执行一次constructor方法&#xff0c;创建不同的实例。 每次new都要传参数&…
阅读更多...
MySQL学习笔记(持续更新，目前到十一章锁)

MySQL学习笔记(持续更新，目前到十一章锁)

1、Mysql概述 1.1 数据库相关概念 三个概念&#xff1a;数据库、数据库管理系统、SQL 名称全称简称数据库存储数据的仓库&#xff0c;数据是有组织的进行存储DataBase&#xff08;DB&#xff09;数据库管理系统操纵和管理数据库的大型软件DataBase Mangement System&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023