【React全家桶】react路由

news2024/11/19 19:34:59

react路由

          • 5.1. 路由的简介
          • 5.2 路由的基本使用
          • 5.3 路由组件与一般组件
          • 5.4 NavLink及其封装
          • 5.5 Switch
          • 5.6 路由的模糊匹配与严格匹配
          • 5.7 Redirect重定向
          • 5.8 向路由组件传递参数
          • 5.9 编程式路由导航
          • 5.10withRouter的使用
          • 5.12 BrowserRouter与HashRouter的区别

5.1. 路由的简介

单页Web应用(single page web application,SPA)。整个应用只有一个完整的页面。击页面中的链接不会刷新页面,只会做页面的局部更新。数据都需要通过ajax请求获取,
并在前端异步展现,且是单页面、多组件

  1. 一个路由就是一个映射关系(key:value)

  2. key为路径, value可能是function或component

  • 路由分类

    1. 后端路由:

(1) value是function, 用来处理客户端提交的请求。
(2)注册路由: router.get(path, function(req, res))
(3)当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

  1. 前端路由:

(1)浏览器端路由,value是component,用于展示页面内容。
(2)注册路由:
(3)工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
(4)前端路由也要靠BOM 上的 history

5.2 路由的基本使用
  1. 明确好界面中的导航区、展示区

  2. 导航区的a标签改为Link标签
    Demo

  3. 展示区写Route标签进行路径的匹配(在呈现路由组件内容的位置注册路由)

<Routes>
	<Route path="/about" element={<About/>}/>
	<Route path="/home" element={<Home/>}/>
</Routes>
5.3 路由组件与一般组件
  1. 写法不同:
    一般组件:
    路由组件:

  2. 存放位置不同:
    一般组件:components
    路由组件:pages

  3. 接收到的props不同:
    一般组件:写组件标签时传递了什么,就能收到什么
    路由组件:接收到三个固定的属性

5.4 NavLink及其封装
  • NavLink可以实现路由链接的高亮,通过activeClassName指定样式名

  • 标签体内容是一个特殊的标签属性,可以通过this.props.children获取。因此以下两段代码是等价的。

5.5 Switch
  1. 注册路由时用Switch包裹所有路由

  2. 通常情况下,path和component是一一对应的关系。

  3. Switch可以提高路由匹配效率(单一匹配)。

5.6 路由的模糊匹配与严格匹配
  1. 默认使用的是模糊匹配(【输入的路径】必须包含要【匹配的路径】,且顺序要一致)
<MyNavLink to="/about/a/b">Home</MyNavLink>  //模糊匹配
<Route path="/about" component={About}/>
  1. 开启严格匹配:

// exact={true}可以简写为exact

  1. 严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
5.7 Redirect重定向

一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由

5.8 向路由组件传递参数

state参数

  1. 路由链接(携带参数):

详情

  1. 注册路由(无需声明,正常注册即可):

  2. 接收参数:this.props.location.state
    备注:刷新也可以保留住参数,但回退不行,无法回退到上一个·同级路由

5.9 编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退,而不用路由的和,但还是要注册路由

  • this.prosp.history.push()

  • this.prosp.history.replace()

  • this.prosp.history.goBack()

  • this.prosp.history.goForward()

  • this.prosp.history.go()

5.10withRouter的使用
  1. withRouter可以加工一般组件,让一般组件具备路由组件所特有的API

  2. withRouter的返回值是一个新组件。

  3. 在一般组件中要用到路由组件的props属性时引入。

import {withRouter} from 'react-router-dom'
//需要暴露
export default withRouter(Header)

5.12 BrowserRouter与HashRouter的区别
  • 底层原理不一样: BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
    HashRouter使用的是URL的哈希值。

  • path表现形式不一样 BrowserRouter的路径中没有#,例如:localhost:3000/demo/test HashRouter的路径包含#,例如:localhost:3000/#/demo/test

  • 刷新后对路由state参数的影响

    • 1)BrowserRouter没有任何影响,因为state保存在history对象中。

    • 2)HashRouter刷新后会导致路由state参数的丢失

在这里插入图片描述

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

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

相关文章

代码随想录--二叉树章节总结 Part III

代码随想录–二叉树章节总结Part III 1.Leetcode106 从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 解题思路…

【Go基础】并发编程

文章目录1. 并发模型2. Goroutine的使用3. Channel的同步与异步4. 并发安全性5. 多路复用6. 协程泄漏7. 协程管理1. 并发模型 任何语言的并行&#xff0c;到操作系统层面&#xff0c;都是内核线程的并行。同一个进程内的多个线程共享系统资源&#xff0c;进程的创建、销毁、切…

【监控开发】jps命令怎么远程调用另一个IP的机器,jstatd服务支持

jsp命令远程调用咩有Linux服务器启动jstatd服务的时候Linux服务器如何启动jstatd服务1.查找jdk所在目录2.在jdk的bin目录下创建文件jstatd.all.policy3.给这个文件赋权4.这个文件写入安全配置&#xff0c;赋值粘贴即可5.启动jstatd服务6.查看是否启动成功再去另外一台服务器调用…

第一章:Go语言为并发而生

在早期 CPU 都是以单核的形式顺序执行机器指令。Go语言的祖先C语言正是这种顺序编程语言的代表。顺序编程语言中的顺序是指&#xff1a;所有的指令都是以串行的方式执行&#xff0c;在相同的时刻有且仅有一个 CPU 在顺序执行程序的指令。 随着处理器技术的发展&#xff0c;单核…

C语言深度解剖-关键字(4)

目录 signed、unsigned 关键字补充内容 关于大端和小端 大小端存储数据方式 判断大小端 深入理解数据存储 练习&#xff1a; 写在最后&#xff1a; signed、unsigned 关键字补充内容 关于大端和小端 我们通过在内存中存储一个值&#xff0c; 用于观察数据在内存中的存…

Python连接Liunx中mysql数据库-保姆级教程

首先确保你的liunx中已经安装好了mysql数据库如果没有安装mysql数据库看这篇文章Centos6从零开始安装mysql和tomcat后台环境&#xff0c;并成功部署Tomcat项目图文详细过程 python连接Liunx中mysql数据库进行增删改查liunx中相关环境改变Python中连接liunx中的mysql数据库在Nav…

上班第一件事:马上卸载这个恶心的软件!

一上班就被Notepad给恶心到了。“如果不同意政治观点&#xff0c;就在你的源码中添加随机字符。”这个Notepad作者侯今吾真是把自己当做大人物了啊&#xff1f;&#xff01;率性而为&#xff0c;根本不再考虑用户的感受了。 这个Twitter帖子很快就被一片骂声淹没&#xff0c;这…

【每日CSS3代码】

1-1 两栏布局【1/27】 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…

OpenJudge NOI 2.4 8463:Stupid cat Doge

【题目链接】 OpenJudge NOI 2.4 8463:Stupid cat & Doge 【题目考点】 1. 递归 2. 分形图 【解题思路】 解法1&#xff1a;递归 1级正方形边长是212^121&#xff0c;2级正方形边长为222^222&#xff0c;。。。&#xff0c;n级正方形边长为2n2^n2n&#xff0c;总格子…

autojs画六边形

牙叔教程 简单易懂 界面基础代码 "nodejs ui"; require("rhino").install(); const ui require("ui"); class MainActivity extends ui.Activity {constructor() {super();}get layoutXmlFile() {return "layout.xml";}onContentVi…

高效学 C++|继承与组合

继承是面向对象程序设计的重要特性之一。作为面向对象的编程语言&#xff0c;C语言也自然支持这个特性。继承是代码复用的基本方法之一&#xff0c;也是接口和复用设计的关键。本文介绍继承的含义和继承与组合的关系。 01、继承的含义 面向对象程序设计通过将问题域中的事物抽…

Web 应用程序的文件系统写入能力

介绍 NodeJS 之前&#xff0c;JS 操作文件只能通过 HTML <input type"file"> 元素或 XMLHttpRequest&#xff08;或之后的 fetch&#xff09;&#xff0c;来对本地文件进行一些浏览和上传操作。NodeJS 给予了 JS 操作系统底层 API 的能力&#xff0c;但这只能…

章节7 查看和处理文件内容

7-查看和处理文件内容 文本文件 ASCII、UTF-8、Unicode、ANSItxt、xml、conf、properties、yml等配置文件、日志文件、源代码 二进制文件 可执行文件、图片、音频、视频 cat 全拼&#xff1a;concatenate [kənˈkt(ə)nˌeɪt] 连接 格式&#xff1a;cat 文件名 more/…

eyeurl—一款网页批量截图工具

eyeurl使用说明 开发说明 eyeurl由作者&#xff1a;云小书 开发&#xff0c;源于日常渗透测试中&#xff0c;信息收集到的url过多&#xff0c;挨个打开查看比较繁琐&#xff0c;且效率极低&#xff0c;网上有大佬开发的eyewitness&#xff0c;且ui布局各方面都比较完善&#…

sadserver 题目思路概述

背景 从 阮一峰老师的博客 了解到 sadserver 可以在线挑战一些 linux 指令相关问题&#xff08;整体难度一般&#xff0c;但做题体验不错&#xff0c;有提示&#xff09;&#xff0c;这里将目前网站提供的的16道题进行简单解答&#xff0c;提供思路和相关指令 本文csdn 博客地…

初识Java虚拟机

1.概述 Java虚拟机&#xff1a;Java Virtual Machine。正是有了Java虚拟机&#xff0c;Java语言实现了跨平台的特性&#xff0c;一次编译&#xff0c;多处运行。 目前使用范围最广的虚拟机就是Hotspot VM&#xff0c;它是OracleJDK和OpenJDK中的默认Java虚拟机。 相比于其他…

[Android Studio]开发APP应用出现软件程序打开闪退的排错

&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Android Debug&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Topic 发布安卓学习过程中遇到问题解决过程&#xff0c;希望我的解决方案可以对小伙伴们有帮助。 &#x1f4cb;笔记目…

你还没用过Mybatis-Plus?丝般顺滑,快速上手!

一、概述 1.1、什么是MyBatis-Plus MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 1.2、特性 无侵入&#xff1a;只做…

RabbitMQ入门前篇

本篇博文目录:一.RabbitMQ1.消息队列2.RabbitMQ3.安装RabbitMQ4.RabbitMQ常用命令二.使用RabbitMQ进行编程1.AMQP2.第一次MQ通信三.RabbitMQ六中工作模式1.RabbitMQ2.Work queues3.pub/sub订阅发布模式4.Routing模式5.主题Topic模式四.RabbitMQ消息确认机制五.源代码下载一.Rab…

我性格比较内向,适合做管理吗?

许多刚走上管理岗位的朋友&#xff0c;都有这样的困惑&#xff1a;1.我比较内向&#xff0c;不适合做管理。2.我不擅长演讲&#xff0c;没有领导才能。3.我太谨小慎微了&#xff0c;做不好领导。4.我太喜欢出风头&#xff0c;静不下心来做管理。5.我太强势了&#xff0c;团队很…