React学习计划-React16--React基础（六）路由

路由

一、版本5路由

1. react-router-dom
2. 路由的使用
1. 基础使用
  1. 安装：yarn add react-router-dom@5
  2. 明确好界面中的导航区、展示区
  3. 导航区Link标签包裹
    <Link to="/home">Home</Link>
  4. 展示区写在Route标签进行匹配
    <Route path='/home' component={Home} />
  5. <App/>最外侧包裹一个<BrowserRouter>或者<HashRouter>
2. 路由组件和一般组件
  1. 写法不同：
    • 一般组件： <Demo/>
    • 路由组件： <Route path='/home' component={Home} />
  2. 存放位置不同：
    • 一般组件写在components文件夹
    • 路由组件一般写在pages文件夹中,
  3. 接收到的props不同：
    • 一般组件：写组件标签时传递了什么，就能收到什么
    • 路由组件：接收三个固定的属性(常用)
    history: 
    go: ƒ go(n)
    goBack: ƒ goBack()
    goForward: ƒ goForward()
    push: ƒ push(path, state)
    replace: ƒ replace(path, state)
location: 
    pathname: "/home"
    search: ""
    state: undefined
match:
    params: {}
    path: "/home"
    url: "/home"
3. NavLink与封装NavLink
  1. NavLink 可以实现路由链接的高亮，通过activeClassName指定样式名
  2. 标签体内容是一个特殊的标签属性
  3. 通过this.props.children可以获取标签体内容

使用NavLink
在这里插入图片描述

封装NavLink
在这里插入图片描述

4.Switch的使用
  1. 通常情况下，path和component是一一对应的关系
  2. Switch可以提高路由匹配效率（单一匹配）
    在这里插入图片描述
5. 解决多级路径刷新页面样式丢失的问题
  1. publick/index.html中，引入样式时不写./写/（常用）
  2. publick/index.html中，引入样式时不写./写%PUBLIC_URL%（常用）
  3. 使用HashRouter
  4. 原因：加载不存在的路径时，默认把publick/index.html返回
6. 路由的模糊匹配和严格匹配exact
  1. 默认使用的使模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序一致）
  2. 开启严格匹配，<Route exact path='/about' component={About}/>
  3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
    在这里插入图片描述
7. Redirect的使用
  1. 一般写在所以路由注册的最下方，当所以路由无法匹配时，跳转到Redirect指定的路由
  2. 编码
<Switch>
  <Route path='/home' component={Home} />
  <Route path='/about' component={About} />
   {/* 写在最底部，重定向, 路由都匹配不上，就去 to ... */}
  <Redirect to='/home'/>
</Switch>
8. 嵌套路由
  1. 注册子路由时要写上父路由的path值
  2. 路由的匹配是按照注册路由的顺序进行的
9. 向路由组件传递参数
1. params参数
  1. 路由链接（携带参数）：
<Link to={`/about/message/detail/${item.id}/${item.title}`}>{item.title}</Link>
  1. 注册路由（声明接收）：
<Route path='/about/message/detail/:id/:title' component={Detail}/>
  1. 接收参数：const {id, title} = this.props.match.params
2. search参数
  1. 路由链接（携带参数）：
<Link to={`/about/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>
  1. search参数无需声明接收，正常注册路由即可：
 <Route path='/about/message/detail' component={Detail}/>
  1. 接收参数：
// search 接收参数 react自动安装的库
import qs from 'querystring'
const {search} = this.props.location
const {id, title} = qs.parse(search.slice(1))
  1. 备注： 获取到search是urlencoded编码，需要借助querystring解析
3. state传递参数
  1. 路由链接（携带参数）：
<Link to={{pathname:'/about/message/detail', state:{
  id: item.id,
  title: item.title
}}}>{item.title}</Link>
  1. 注册路由（声明接收）：
// state参数无需声明接收，正常注册路由即可
<Route path='/about/message/detail' component={Detail}/>
  1. 接收参数：const {id, title} = this.props.match.state
  2. 备注： 刷新也可以保留住参数
9. push与replace
  1. 加上replace属性，将不会再进行压栈，浏览器不会有回退记录
<MyNavLink replace to='/about/message'>Message</MyNavLink>
10. 编程式导航

借助this.props.history对象上的API对操作路由跳转、前进、后退

  this.props.history.push()
  this.props.history.replace()
  this.props.history.goBack()
  this.props.history.goForward()
  this.props.history.go()
11. withRouter
  1. withRouter 可以加工一般组件，让一般组件具备路由组件所持有的API
  2. withRouter的返回值是一个新组件
import { withRouter } from 'react-router-dom'
export default withRouter(Hearder)

示例中：普通组件想要实现路由跳转
在这里插入图片描述
App.js中：
在这里插入图片描述

12. BrowserRouter和HashRouter的区别
  1. 底层原理不同：
    BrowserRouter使用的使H5的history的API，不兼容IE9及以下版本，
    HashRouter使用的使URL的哈希值
  2. path表现形式不一样
    BrowserRouter的路径中间没有#，例如：localhost:3000/demo/test
    HashRouter的路径包含#，例如：localhost:3000/#/demo/test
  3. 刷新后对路由state参数的影响
    BrowserRouter没有影响，因为state保存在history对象中
    HashRouter刷新后会导致路由state参数丢失
  4. 备注：HashRouter可以用于解决一些路径错误相关的问题

二、版本6路由

1. 概述
  1. react Router 三个不同的包发布在npm上：它们分别是：
    1. react-router: 路由的核心库，提供很多的：组件，钩子
    2. react-router-dom: 包含react-router所以内容，并添加一些专门用于DOM组件。例如<BrowerRouter>等
    3. react-router-native: 包含react-router所以内容，并添加一些专门用于ReactNative的API。例如<NativeRouter>等
  2. 与React Router 5.x版本相比，改变了什么？
    1. 内置组件的变化：移除<Switch/>,新增<Routes/>等
    2. 语法的变化：component={About}变为elemet={<About/>}等
    3. 新增多个hook:useParams、useNavigate、useMatch等
    4. 官方明确推荐函数式组件了！！！
      …
2. Component
1. <BerwserRouter>
2. <HashRouter>
3. <Routes/>和<Route/>
  1. v6版本中移除了<Switch>,引入了新的替代者：<Routes>
  2. <Routes>和<Route>要配合使用，且必须要用<Routes>包裹<Route>
  3. <Route>相当于一个if语句，如果其路径与当前URL匹配，则呈现其对应的组件
  4. <Route caseSensitive>属性用于指定：匹配时是否区分大小写（默认为fasle）
  5. 当URL发生变化时,<Routes>都会查看其所有子<Route>元素以找到最佳匹配并呈现组件
  6. <Route>也可以嵌套使用，且配合useRoutes()配置"路由表"，但需要通过<Outlet>组件来渲染其子路由（见<Outlet/>说明）
  7. 示例代码：
  // 路由表
  const element = useRoutes({
    path: '/home',
    element: <Home/>
    },
    {
      path: '/about',
      element: <About/>,
      children: [
        {
          path: 'news',
          element: <News/>,
        },
        {
          path: 'message',
          element: <Message/>,
          children: [
            {
              path: 'detail',
              element: <Detail/>
            }
          ]
        }
      ]
    },
    {
      path: '/',
      element: <Navigate to='/about'/>
    }
  ])
  return (
    <>
    {/* 1. 在react中靠路由实现切换组件--编写路由链接 */}
    <NavLink className={okTive} to='/home'>Home</NavLink>
    <br/>
    <NavLink className={okTive} to='/about'>About</NavLink>

    {/* 2. 注册路由 */}
    <hr/>
    {/* Routes注册*/}
    {/* <Routes> 
      <Route path='/home' element={<Home/>} />
      <Route path='/About' element={<About/>} />
      <Route path='/' element={<Navigate to="/about"/>}/>
    </Routes> */}
    {/* 路由表注册*/}
    {element}
    </>
  )
4. <Link>
  1. 作用：修改URL，且不发送网络请求（路由链接）
  2. 注意: 外侧要用<BrowserRouter/>和<HashRouter/>包裹
5. <NavLink>
  1. 作用：与<Link>组件类似，且可实现导航的高亮效果
6. <Navigate>
  1. 作用：只要<Navigate>组件被渲染，就会修改路径，切换视图
  2. replace属性用于控制跳转模式,(push或replace,默认是push)
  3. 实例代码：
import {useState} from 'react'
import {Navigate} from 'react-router-dom'

export default function Home() {
  const [num, setNum] = useState(1)
  
  return (
    <>
      {num === 2 
        ? <Navigate to='/about' replace/> 
        : <h4>num的值是{num}</h4>}
      <button onClick={() => setNum(2)}>点击</button>
    </>
  )
}
7. <Outlet>
  1. 当<Route>产生嵌套是，渲染其对应的后续子路由
  2. 示例代码：
<div>
  <ul>
    <li>
      {/* <NavLink className={okTive} to='news'>News</NavLink> */}
      {/* <NavLink className={okTive} to='/about/news'>News</NavLink> */}
      <NavLink className={okTive} to='./news'>News</NavLink>
    </li>
    <li>
      <NavLink className={okTive} to='message'>Message</NavLink>
    </li>
  </ul>
  {/* 指定路由组件呈现的位置（二级+路由） */}
  <Outlet/>
</div>
3. HOOKS
1. useRoutes()
  1. 根据路由表，动态创建<Routes>和<Route>
2. useNavigate()
  1. 作用：返回一个函数用来实现编程式导航
  2. 示例代码：
import { useNavigate } from 'react-router-dom'

export default function  Hearder() {
  const navigate = useNavigate()

  const back = () => {
    navigate(-1)
  }

  const forward = () => {
    navigate(1)
  }

  const handleClick = () => {
    navigate('detail',{
      replace: false,
      state: {
        id: '122',
        title: '小明',
        content: '热爱祖国'
      }
    })
  }
  return (
    <>
      <button onClick={back}>后退</button>
      <button onClick={forward}>前进</button>
      <button onClick={handleClick}>跳转详情</button>
    </>
  )
}
3. useParams()
  1. 作用： 当前匹配路由的params参数
4. useSearchParams()
  1. 作用： 用于读取和修改当前位置的URL中的查询字符串
  2. 返回一个包含两个值的数组，内容分别为：当前的search参数、更新search的函数
5. useLocation()
  1. 作用：获取当前location信息,对标5.x中的路由组件的localtion属性(可用于获取state参数)
6. useMatch()
  1. 作用：返回当前匹配信息，对标5.x中的路由组件的match属性
7. useInRouterContext()（APP.jsx）
  1. 作用：如果组件在<Router/>的上下文中呈现(被路由包裹的组件)，则useRouterContext钩子返回true,否则false
8. useNavigationType()(News.jsx)
  1. 作用：返回当前的导航类型（用户是如何来到当前页面的）
  2. 返回值：POP,PUSH,REPLACE
  3. 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）
9. useOutlet()(About.jsx)
  1. 作用：用来呈现当前组件中要渲染的嵌套路由
  2. 示例代码：
const a = useOutlet()
console.log(a, 'useOutlet嵌套')
// 如果嵌套路由没有挂载，则a为null
// 如果嵌套路由已经挂载，则展示嵌套路由对象
10. useResolvedPath()(News.jsx)
  1. 作用：给定一个URL值，解析其中的：path、search、hash值

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

elasticsearch系列七：聚合查询

elasticsearch系列七：聚合查询

概述 今天咱们来看下es中的聚合查询&#xff0c;在es中聚合查询分为三大类bucket、metrics、pipeline&#xff0c;每一大类下又有十几种小类&#xff0c;咱们各举例集中&#xff0c;有兴许的同学可以参考官网&#xff1a;https://www.elastic.co/guide/en/elasticsearch/refere…
阅读更多...
使用vivado使用的方法以及遇到的错误

使用vivado使用的方法以及遇到的错误

文章目录 前言一、Vivado运行RTL分析闪退二、在创建完工程后修改开发板型号三、引脚分配时&#xff0c;没有对应引脚或是I/O Std四、创建bit流文件五、安装Modelsim的流程&#xff08;有一步很重要&#xff09;六、和谐Modelsim七、vivado联合Modelsim进行仿真 前言 学习vivad…
阅读更多...
VSCode 如何安装插件的历史版本

VSCode 如何安装插件的历史版本

背景 在日常开发过程中&#xff0c;我们可能会遇到新版VSCode插件存在问题&#xff0c;无法正常工作的情况。这种情况下&#xff0c;一种可行的解决方案就是安装插件的历史版本。VSCode 插件默认安装的都是插件最新的版本&#xff0c;例如下面 vscode-styled-compoents 插件 本…
阅读更多...
【Harmony OS - Stage应用模型】

【Harmony OS - Stage应用模型】

基本概念 大类分为&#xff1a; Ability Module&#xff1a; 功能模块 、Library Module&#xff1a; 共享功能模块 编译时概念&#xff1a; Ability Module在编译时打包生成HAP&#xff08;Harmony Ability Package&#xff09;&#xff0c;一个应用可能会有多个HAP&#xf…
阅读更多...
记一次应急响应练习(Linux)

记一次应急响应练习(Linux)

记一次应急响应练习(Linux) Linux&#xff1a; 请提交攻击者的IP地址 答&#xff1a; 192.168.31.132 思路&#xff1a; 通过查看历史命令和开放的8080端口看到这台主机上运行的是Tomcat服务。并且在历史命令中看到了Tomcat的安装路径。那么就算是找到了日志的查看点了&#x…
阅读更多...
【WPF.NET开发】路由事件

【WPF.NET开发】路由事件

本文内容 先决条件什么是路由事件&#xff1f;路由策略为什么使用路由事件&#xff1f;附加并实现路由事件处理程序类处理程序WPF 中的附加事件XAML 中的限定事件名称WPF 输入事件EventSetter 和 EventTrigger Windows Presentation Foundation (WPF) 应用程序开发人员和组件…
阅读更多...
华为鸿蒙（HarmonyOS）介绍

华为鸿蒙（HarmonyOS）介绍

华为鸿蒙&#xff08;HarmonyOS&#xff09;介绍 华为鸿蒙&#xff08;HarmonyOS&#xff09;是一款由华为自主研发的操作系统&#xff0c;旨在为各种智能设备提供一种统一、高效、安全的解决方案。鸿蒙系统基于微内核架构&#xff0c;可以应用于多种类型的设备&#xff0c;鸿…
阅读更多...
vue项目中实现预览pdf

vue项目中实现预览pdf

vue项目中实现预览pdf 1. iframe <iframe :src"pdfSrc"></iframe> ​data() {return {pdfSrc: http://192.168.0.254:19000/trend/2023/12/27/5635529375174c7798b5fabc22cbec45.pdf,}},​iframe {width: 100%;height: calc(100vh - 132px - 2 * 20px -…
阅读更多...
main函数的参数ac和av

main函数的参数ac和av

概要&#xff1a; main函数有两个参数&#xff0c;ac和av ac表示参数的个数&#xff0c;程序名包括在内。也就是说程序无参数运行时&#xff0c;ac的值为1 av是一个字符串数组&#xff0c;这个数组中的每个元素表示一个参数&#xff0c;程序名包括在内。也就是说&#xff0c…
阅读更多...
CSS——定位、CSS高级技巧、修饰属性

CSS——定位、CSS高级技巧、修饰属性

1、定位 作用&#xff1a;灵活的改变盒子在网页中的位置 实现&#xff1a; 定位模式&#xff1a;position边偏移&#xff1a;设置盒子的位置 leftrighttopbottom 1.1 相对定位 position&#xff1a;relative <!DOCTYPE html> <html lang"en"> <…
阅读更多...
夜天之书 #92 全票通过？同侪社群无须整齐划一。

夜天之书 #92 全票通过？同侪社群无须整齐划一。

近几年&#xff0c;国内开源项目捐赠到 Apache 软件基金会&#xff08;ASF&#xff09;的案例很有一些。几乎每个在进入孵化器和从孵化器当中毕业时发通稿的项目&#xff0c;都会选择在标题中加入“全票通过”的字样。 诚然&#xff0c;大部分项目在 ASF 孵化器中茁壮成长&…
阅读更多...
MyBatis标签及其应用示例

MyBatis标签及其应用示例

MyBatis标签及其应用示例 1. select 1.1 标签属性 id唯一的标识符parameterType传给此语句的参数的全路径名或别名如&#xff1a;com.xxx.xxx.demo.entity.User或userresultType语句返回值类型或别名。如果是集合List&#xff0c;此处填写集合的泛型T&#xff0c;而不是集合…
阅读更多...
力扣：968. 监控二叉树（贪心，二叉树）

力扣：968. 监控二叉树（贪心，二叉树）

题目&#xff1a; 给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及其直接子对象。 计算监控树的所有节点所需的最小摄像头数量。 示例 1&#xff1a; 输入&#xff1a;[0,0,null,0,0] 输出&#xff1a;1 解释&…
阅读更多...
Oracle 学习（2）

Oracle 学习（2）

过滤和排序数据 where条件过滤 日期格式 查询10号部门的员工信息&#xff1a;SQL> select * from emp where deptno10 查询”KING”的信息&#xff1a;SQL> select * from emp where ename KiNg 未选定行。 注意&#xff1a;字符串大小写敏感。 SQL> selec…
阅读更多...
Oracle数据库导入csv 文件

Oracle数据库导入csv 文件

Oracle数据库导入csv 文件
阅读更多...
锐捷路由小型综合实验

锐捷路由小型综合实验

一、实验拓扑 二、实验目的 1、熟练掌握ospf的配置 2、熟练掌握RIP的配置 3、熟练掌握静态路由的配置 4、熟练掌握各种路由协议之间的引入 5、熟练掌握telnet和ssh的配置 三、实验配置 R1 //配置telent username admin password admin123 enable password admin123 enable…
阅读更多...
【iOS安全】越狱iOS安装Frida | 安装指定版本Frida

【iOS安全】越狱iOS安装Frida | 安装指定版本Frida

越狱iPhone安装Frida 本文的方法适用于已越狱的iPhone手机 打开Cydia&#xff0c;软件源&#xff0c;编辑&#xff08;右上角&#xff09;&#xff0c;添加&#xff08;左上角&#xff09;&#xff1a;https://build.frida.re 然后搜索Frida&#xff0c;点击安装 参考&#x…
阅读更多...
嵌入式Linux：提升VMware虚拟机运行速度的方法

嵌入式Linux：提升VMware虚拟机运行速度的方法

使用虚拟机运行Linux操作系统通常会比在物理机上直接安装系统的运行效率更低&#xff0c;本篇博文将介绍如何优化虚拟机的设置&#xff0c;进而提升虚拟机性能体验。 第1步&#xff1a;选择VMware菜单&#xff1a;编辑–>首选项–>更新&#xff0c;将”启动时检查产品更新…
阅读更多...
如何应对人工智能时代下的网络与数据安全威胁

如何应对人工智能时代下的网络与数据安全威胁

2023&#xff08;第四届&#xff09; 网络法治论坛 ——人工智能时代的网络与数据治理暨公益大讲堂于2023年12月23日在北方工业大学&#xff08;石景山晋元庄路5号院&#xff09;学生服务中心四层报告厅成功举办。网络法治论坛是在北京市法学会指导下的&#xff0c;由北京市网络…
阅读更多...
uniapp中uview组件库的Search 搜索 的用法

uniapp中uview组件库的Search 搜索 的用法

目录 基本使用 #设置输入框形状 #是否开启清除控件 #是否开启右边控件 #自定义样式 API #Props #Events 基本使用 通过placeholder参数设置占位内容通过v-model双向绑定一个变量值&#xff0c;设置初始化时搜索框的值&#xff0c;如果初始内容为空&#xff0c;那么请绑…
阅读更多...
最新文章

Copyright @ 2022~2023