当前位置: 首页 > news >正文

131.《router v 5 与 react-router v 6》

文章目录

    • 1.什么是路由
    • 2.路由分类
    • 3.react-router-dom的理解
    • 4. react-router-dom相关API
    • 5.其他
    • 6. react-router5 路由基本使用
      • 1.效果
      • 2.代码
        • App.js一级路由
        • home.js下的二级路由
    • 7.路由传参的三种方式
    • 8.react-router6 基本使用
      • 1.一级路由
      • 2.二级路由
      • 3.hooks
        • useRoutes
        • useParams
        • useSearchParams
        • useLocation
        • useNavigate
    • 9.react-router5 和 react-router6 区别

1.什么是路由

  1. 一个路由就是一个映射关系(key:value)
  2. key为路径,value可能是function或component

2.路由分类

  • web ( PC端 )
  • native(react native)
  • anywhere (其他)

3.react-router-dom的理解

  1. react的一个插件库。

  2. 专门用来实现一个SPA应用。

  3. 基于react的项目基本都会用到此库。

4. react-router-dom相关API

  1. BrowserRouter

  2. HashRouter

  3. Route

  4. Redirect

  5. Link

  6. NavLink

  7. Switch

5.其他

  1. history对象

  2. match对象

  3. withRouter函数

6. react-router5 路由基本使用

1.效果

react-router5

2.代码

App.js一级路由

注意:

  • activeClassName 为当前激活的样式类名,demo 提前在 public 中的 index.html 中定义好

封装的路由 NavLink

// 封装后的 NavLink
function MyLink(props){return  <NavLink activeClassName='demo' {...props} />
}

App.jsx

import {  Route, Switch,Redirect, BrowserRouter, Switch, Redirect } from 'react-router-dom'
import About from './about/index'
import Home from './home/index'export default function App() {return (<BrowserRouter><div><div> header  </div><div style={{ flex: 1, fontSize: '32px' }} ><MyLink to={'/about'} >about</MyLink><br /><MyLink to={'/home'} >home</MyLink></div><div style={{ flex: 7, fontSize: '32px' }} ><Switch><Route to={'/about'}  component={About} /><Route to={'/home'}  component={Home} /><Redirect to={'home'} /></Switch></div></div></BrowserRouter>)
}

home.js下的二级路由

注意:因为根组件 App.js 已被 BrowserRouter 包裹,所以这里不需要用 BrowserRouter 再次包裹路由

import React from 'react'
import MyLink from '../com'
import Message from './message'
import New from './new'
import { Route, Redirect } from 'react-router-dom'
export default function Home() {return (<div  > <h1><MyLink to="/home/message" >message</MyLink><MyLink to="/home/new" >new</MyLink></h1> <div><Route path="/home/message" component={Message} /><Route path="/home/new" component={New} /><Redirect to="/home/message" /></div></div>)
}

7.路由传参的三种方式

  1. params

    Link

    let name = '张三'
    let age = 18
    <Link to=`/home/${name}/${age}` />
    

    Route

    <Route path="/home/:title/:age" />
    

    conponent 接收

    let { title, age } = props.match.params
    
  2. query

    Link

    <Link to=`/home?name='zhangsan'&age=18` />
    

    Route

    <Route path="/home" />
    

    conponent 接收

      import qs from 'querystring'let res = qs.parse(props.location.search.slice(1))
    
  3. state

    Link

    <Link to={{ pathname: '/home', state: { title:"zhangsan", age:18 } }} />
    

    Route

    <Route path="/home" />
    

    conponent 接收

    let {age,title} = props.location.state 
    

8.react-router6 基本使用

useRoutes 为路由表,可通过数组的形式进行嵌套配置

1.一级路由

app.js

import React, { useState } from 'react'
import { Route, Routes, Navigate, useRoutes } from 'react-router-dom'
import About from './about/index'
import Home from './home/index'
import Header from './Header/index' 
import Message from './home/message'
import New from './home/new'
import Detail from './home/detail'export default function Index() {let element = useRoutes([{path: '/about',element: <About />},{path: '/home',element: <Home />,children: [{path: 'message',element: <Message />,children: [// search, state 参数{path: 'detail',element: <Detail />,}]},{path: 'new',element: <New />,}]},{path: '/',element: <Navigate to="/home" />}])return (<div><Header /><div style={{ display: "flex" }} ><div style={{ flex: 1, fontSize: '32px' }} ><Link to={'/about'} >about</Link><br /><Link to={'/home'} >home</Link></div><div style={{ border: "10px solid red", padding: '20px', flex: 7 }} >{element}</div></div></div >)
}

2.二级路由

home.js

import React from 'react'
import Message from './message'
import New from './new'
import { Route, Navigate, Routes, Outlet, NavLink } from 'react-router-dom'export default function Home() {return (<div  ><h1><NavLink to="message"  >Message</NavLink> &nbsp;<NavLink to="new"  >New</NavLink></h1><div>{/* <Routes> <Route path={'/home/message'} element={<Message />} /><Route path={'/home/new'} element={<New />} /><Route path={'/home/message'} element={<Navigate to={'/home/message'} />} /><Redirect to="/home" /></Routes> */}// 路由出口<Outlet /></div></div>)
}

3.hooks

useRoutes

路由表

import {  useRoutes } from 'react-router-dom'
// 导入组件
import About from './about/index'
import Home from './home/index' 
import Message from './home/message'
import New from './home/new'
import Detail from './home/detail'export default function Index() { // 定义路由表
let element = useRoutes([{path: '/about',element: <About />},{path: '/home',element: <Home />,children: [{path: 'message',element: <Message />,children: [  {path: 'detail',element: <Detail />,}]} ]},{path: '/',element: <Navigate to="/home" />}])return (<div> <div style={{ display: "flex" }} ><div style={{ flex: 1, fontSize: '32px' }} ><Link to={'/about'} >about</Link><br /><Link to={'/home'} >home</Link></div><div style={{ border: "10px solid red", padding: '20px', flex: 7 }} >{/* <Routes> */}{/* <Route path={"/about"} element={<About />} /><Route path={"/home"} element={<Home />} /><Route path={"/"} element={<Navigate to="/home" />} /> */}{/* <Redirect to={"/home"}  /> */}{/* </Routes> */}// 渲染路由表{element}</div></div> </div >)
}

useParams

接收 params 参数

路由表配置

import {  useRoutes } from 'react-router-dom'
let element = useRoutes([  // params 参数{path: 'detail/:id/:title',element: <Detail />,} ])

Link配置

let v = { id: 0, title: '消息001' }
<Link to={`/home/message/detail/${v.id}/${v.title}` } >{v.title}</Link> 

使用

import React from 'react' 
import { useParams, useSearchParams, useLocation } from 'react-router-dom';{/* params 参数 */}
export default function Detail(props) {console.log('props', props);  let {title,id} = useParams() return (<div><ul> <h1>ID:{id}</h1><h1>title:{title}</h1> </ul></div>)
}

useSearchParams

路由表配置

import {  useRoutes } from 'react-router-dom'
let element = useRoutes([  // params 参数{path: 'detail',element: <Detail />,} ])

Link配置

let v = { id: 0, title: '消息001' }
<Link to={`/home/message/detail?id=${v.id} & title=${v.title}` } >{v.title}</Link> 

使用

import { useSearchParams } from 'react-router-dom';{/* search 参数 */}
export default function Detail() { let [search, setSearch] = useSearchParams()  let id = search.get("id")let title = search.get("title")return (<div><ul> <h1>ID:{id}</h1> <h1>title:{title}</h1> </ul></div>)
}

useLocation

路由表配置

import {  useRoutes } from 'react-router-dom'
let element = useRoutes([  // params 参数{path: 'detail',element: <Detail />,} ])

Link配置

let v = { id: 0, title: '消息001' }
<Link to={`/home/message/detail`} state={{ id: v.id, title: v.title }}
>{v.title}</Link> 

使用

import { useSearchParams, useLocation } from 'react-router-dom';{/* search 参数 */}
export default function Detail() { let search = useLocation().state  let id = search.get("id")let title = search.get("title")return (<div><ul> <h1>ID:{id}</h1> <h1>title:{title}</h1> </ul></div>)
}

useNavigate

编程时路由导航 => 只支持 state

import { useNavigate } from 'react-router-dom'
export default function Message() {let navigate = useNavigate()let mess = [{id: 0,title: '消息1'},{id: 1,title: '消息2'},{id: 2,title: '消息3'}]const seeDetail = (v) => {navigate('detail', {replace: false,state: {id: v.id,title: v.title,}})}return (<div><ul>{mess.map((v, i) => { return <h1 key={i}><Link  to={`/home/message/detail`}  state={{ id: v.id, title: v.title }}>{v.title}</Link><button onClick={() => seeDetail(v)} >查看详情</button></h1>})}</ul><div><Outlet /></div></div>)
}

9.react-router5 和 react-router6 区别

1.内置组件的变化: 移除,新增等

2.语法的变化: component=(About}变为 element=(}等。

3.新增多个hook: useParams、useMatch等useNavigate

4.官方明确推荐函数式组件了!! !

相关文章:

131.《router v 5 与 react-router v 6》

文章目录1.什么是路由2.路由分类3.react-router-dom的理解4. react-router-dom相关API5.其他6. react-router5 路由基本使用1.效果2.代码App.js一级路由home.js下的二级路由7.路由传参的三种方式8.react-router6 基本使用1.一级路由2.二级路由3.hooksuseRoutesuseParamsuseSear…...

2023第十届北京老年产业博览会/中国养老护理人才培育计划

CBIAIE北京老博会&#xff0c;打造2023年度唯具参展价值的老年行业盛会&#xff1b; 北京老博会&#xff1a;2011年&#xff0c;我国首场以“老年产业”为主题&#xff0c;一场专注于老年福祉、健康的国际型行业发展盛会&#xff0c;中国&#xff08;北京&#xff09;国际老年…...

STM32F407VET6 / BLACK_F407VE开发板间隔0.5秒不断重启

有一块 STM32F407VET6 的故障开发板, 之前的问题是经常无法烧录, 必须reset之后才能连接, 具体查看这篇 STM32F407VET6烧录出现flash download failed target dll has been cancelled. 并且程序运行一段时间后会halt. 这块开发板后来一直搁箱底吃灰了几年. 最近打算把这片 STM…...

什么是圈复杂度

圈复杂度是一种软件度量指标&#xff0c;用于度量程序中的控制流程的复杂性。它是通过计算程序中独立路径的数量来确定的。简单来说&#xff0c;圈复杂度是指在一个函数或模块中有多少个独立的路径&#xff0c;也就是说&#xff0c;有多少个不同的输入序列可以导致不同的执行路…...

Hbase 数据迁移

Hbase 数据迁移 可选方案对比 l 已验证方案操作说明&#xff1a; n Export&import u 导出命令及示例 hbase org.apache.hadoop.hbase.mapreduce.Export “表名” 文件路径 导出至本地文件系统&#xff1a; ./bin/hbase org.apache.hadoop.hbase.mapreduce.Export ‘defa…...

Docker consul的容器服务更新与发现

一、Consul概述&#xff08;1&#xff09;什么是服务注册与发现服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&#xff0c;也不考虑服务的压力承载&#xff0c;服务之间调用单纯的通过接口访问。直到后来出现了多个节点的分…...

数据库关系模型

关系模型简述 形象地说&#xff0c;一个关系就是一个table。 关系模型就是处理table的&#xff0c;它由三个部分组成&#xff1a; 描述DB各种数据的基本结构形式&#xff1b;描述table与table之间所可能发生的各种操作&#xff1b;描述这些操作所应遵循的约束条件&#xff1…...

你是真的“C”——详解指针知识

你是真的“C”——详解指针知识&#x1f60e;前言&#x1f64c;1、 指针是什么&#xff1f;&#x1f64c;2、指针和指针类型&#x1f64c;2 、1指针-整数2 、 2指针的解引用3、 野指针&#x1f64c;3、 1野指针成因3、 2如何规避野指针4、指针运算&#x1f64c;4、1 指针-整数4…...

React/ReactNative面试攻略(偏RN)

useMemo Vs useCallBackuseMemo第一个参数返回的是值&#xff0c;useCallBack返回的是函数useMemo和useCallBack第二个参数都是依赖项useMemo避免组件非依赖项更新时参数的计算useCallback避免父组件非依赖项更新时造成子组件的重复渲染React.memo 使用场景纯prue组件&#xff…...

Leetcode-每日一题1234. 替换子串得到平衡字符串(滑动窗口 + 哈希表)

题目链接&#xff1a;https://leetcode.cn/problems/replace-the-substring-for-balanced-string/description/ 思路 题目意思 这题意思是一个只含有[Q, W, E, R] 四个字符的字符串s且长度一定是 4的倍数&#xff0c; 需要你通过替换子串&#xff0c;使他变成一个「平衡字符…...

linux命令小结-查看日志命令

一、查看日志命令cat查看文件 vi编辑后可以用cat进行查看保存是否成功1&#xff09;cat -n alert_monitor.log2&#xff09;cat -n alert_monitor.log | tail -n 100 | head -n 20 //查询100行之后的日志&#xff0c;且在100行之后里再查前20条日志more 可以通过回撤键翻页mor…...

Java知识点细节简易汇总——(8)枚举和注解+Java面向对象高级作业

一、枚举 自定义枚举 当我们使用 enum 关键字开发一个枚举类时&#xff0c;默认会继承 Enum 类, 而且是一个 final 类[如何证明],老师使用 javap 工具来演示传统的 public static final Season2 SPRING new Season2(“春天”, “温暖”); 简化成 SPRING(“春天”, “温暖”)…...

快速上手JVM- Java Virtual Machine面试不用慌

一、JVM的定义 JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;JVM是一种用于计算设备的规范&#xff0c;它是一个虚构出来的计算机&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能来实现的。 引入Java语言虚拟机后&#xff0c;J…...

安警官的IP地址是怎样定位到莽村附近的?

要说最近大火的电视剧非《狂飙》莫属。电视剧《狂飙》自开播以来&#xff0c;一举超过《三体》《去有风的地方》等先播电视剧&#xff0c;收视率一路“狂飙”&#xff0c;牢牢占据近期的收视冠军。 在剧中&#xff0c;张译扮演一名坚持公平、正义与理想的人民警察“安欣”&…...

STL中重要容器vector总结

你要尽全力保护你的梦想。那些嘲笑你的人&#xff0c;他们必定会失败&#xff0c;他们想把你变成和他们一样的人。如果你有梦想的话&#xff0c;就要努力去实现。 ——《当幸福来敲门》引言&#xff1a;C中STL里面的容器用法很巧妙&#xff0c;可以解决很多复杂的模型&#xff…...

11_会话原理与实现流程

1、会话的基本知识 # 会话## 1.会话是什么&#xff1f;客户端与服务器之间的对话交流## 2.为什么需要会话&#xff1f;-http 协议是无状态的&#xff08;六亲不认&#xff09;-同一用户多次访问同一网站&#xff0c;对网站来说&#xff0c;每次都是全新的-网站不能识别用户身份…...

Java测试——junit的使用(2)

排序 我们同一个类下的多个用例的执行顺序是不确定的&#xff0c;如果需要指定固定的顺序&#xff0c;则需要在类上加这个注解 TestMethodOrder(MethodOrderer.OrderAnnotation.class)然后在想要第一个执行的用例上加上 Order(1)第二个执行的用例上注解&#xff1a; Order(…...

数据库(六): MySQL的主从复制和读写分离

文章目录一、为什么要使用主从复制和读写分离二、主从复制的原理三、如何实现主从复制3.1 master配置3.2 slave配置3.3 测试主从复制四、读写分离五、缺点一、为什么要使用主从复制和读写分离 注意到主从复制和读写分离一般是一起使用的。目的很简单&#xff0c;就是提高数据库…...

编程思想-0x00架构

产生架构的原因&#xff1f; 1、代码均摊 将不同的代码进行分块&#xff0c;然后简历联系&#xff0c;低耦合、高内聚&#xff1b; 原则上&#xff1a;合理的App架构应该是合理分配每个类、结构体、方法、变量的存在都应该遵循单一职责的原则 2、便于测试 测试确保代码质量&…...

QCon演讲实录(上):多云环境下应用管理与交付实践

作者&#xff1a;阿里云大数据基础工程技术团队——郭耀星 大家上午好&#xff01;我是来自阿里云大数据基础工程技术团队的郭耀星&#xff0c;花名雪尧。今天我很高兴能够来到QCon&#xff0c;与大家分享我的经验和心得。在当前的多云环境中&#xff0c;作为运维支撑团队&…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...