React Router 6笔记

一个路由就是一个映射关系

key为路径，value可能是function或component

路由分类

后端路由（node）

  • value是function，用来处理客户端提交的请求
  • 注册路由：router.get(path, function(req, res))
  • 工作过程：当node接收到一个请求时，根据请求路径找到匹配路由，调用路由中的函数来处理请求，返回响应参数

前端路由

  • value是component，用于展示页面内容
  • 注册路由：<Route path="/home" element={<Home />} >
  • 工作过程：当浏览器的path变为home时，当前路由组件就会变成Home组件

与React Router 5.x 版本相比的改变

  • 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。
  • 语法的变化：component={About} 变为 element={<About/>}等。
  • 新增多个hook：useState、useParams、useNavigate、useMatch等。

官方明确推荐函数式组件
…

React Router 6.x 相关API

1. <BrowserRouter>

说明：<BrowserRouter> 用于包裹整个应用。

示例代码：

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")
);

2. <HashRouter>

说明：
作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。
备注：
6.x版本中<HashRouter>、<BrowserRouter> 的用法与 5.x 相同。

3. <Routes/> 与 <Route/>

  1. v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。
  2. <Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。
  3. <Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
  4. <Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。
  5. 当URL发生变化时，<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件 。
  6. <Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。
import Home from "./pages/home";
import About from "./pages/about";
// V5
<Route path="/home" component={Home} />
<Route path="/about" component={About} />// V6
<Routes><Route path="/home" element={<Home />} /><Route path="/about" element={<About />} />
</Routes>

4. <Link>

作用: 修改URL，且不发送网络请求（路由链接）。

注意: 外侧需要用<BrowserRouter>或<HashRouter>包裹。

示例代码：

import { Link } from "react-router-dom";function Test() {return (<div><Link to="/路径">按钮</Link></div>);
}

5. <NavLink>

作用: 与<Link>组件类似，且可实现导航的“高亮”效果。

示例代码：

// 注意: NavLink默认类名是active，下面是指定自定义的class//自定义样式
<NavLinkto="login"className={({ isActive }) => {console.log('home', isActive)return isActive ? 'base one' : 'base'}}
>login</NavLink>/*默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
*/
<NavLink to="home" end >home</NavLink>

以下是 <NavLink> 组件的一些关键属性：

  1. to：指定链接的目标地址，这与 <a> 标签的 href 属性类似。
  2. end：当设置为 true 时，表示这个链接的目标地址是精确匹配的。如果没有设置 end 或者设置为 false，则 <NavLink>会匹配任何以 to 属性值开始的路由路径。
  3. activeClassName：当链接处于激活状态时，可以指定一个类名来改变其样式。
  4. exact：与 end 属性作用相同，用于精确匹配路由。

6. <Navigate>

作用：
1、只要<Navigate>组件被渲染，就会修改路径，切换视图。

2、replace属性用于控制跳转模式（push 或 replace，默认是push）。

3、示例代码：

import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'export default function Home() {const [sum,setSum] = useState(1)return (<div><h3>我是Home的内容</h3>{/* 根据sum的值决定是否切换视图 */}{sum === 1 ? <h4>sum的值为{sum}</h4> : <Navigate to="/about" replace={true}/>}<button onClick={()=>setSum(2)}>点我将sum变为2</button></div>)
}

7. <Outlet>

当<Route>产生嵌套时，渲染其对应的后续子路由。

示例代码：

//根据路由表生成对应的路由规则
const element = useRoutes([{path:'/about',element:<About/>},{path:'/home',element:<Home/>,children:[{path:'news',element:<News/>},{path:'message',element:<Message/>,}]}
])//Home.js
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'export default function Home() {return (<div><h2>Home组件内容</h2><div><ul className="nav nav-tabs"><li><NavLink className="list-group-item" to="news">News</NavLink></li><li><NavLink className="list-group-item" to="message">Message</NavLink></li></ul>{/* 指定路由组件呈现的位置 */}<Outlet /></div></div>)
}

Hooks

1、useState()

import React, { useState } from 'react';function Bulbs() {const [on, setOn] = useState(false);const lightSwitch = () => setOn(on => !on);return (<><div className={on ? 'bulb-on' : 'bulb-off'} /><button onClick={lightSwitch}>开/关</button></>);
}

2、useRoutes()

作用：根据路由表，动态创建<Routes>和<Route>。

示例代码：

//路由表配置：src/routes/index.js
import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'export default [{path:'/about',element:<About/>},{path:'/home',element:<Home/>},{path:'/',element:<Navigate to="/about"/>}
]//App.jsx
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'export default function App() {//根据路由表生成对应的路由规则const element = useRoutes(routes)return (<div>......{/* 注册路由 */}{element}......</div>)
}

3、useNavigate()

作用：返回一个函数用来实现编程式导航。

示例代码：

import React from 'react'
import {useNavigate} from 'react-router-dom'export default function Demo() {const navigate = useNavigate()const handle = () => {//第一种使用方式：指定具体的路径navigate('/login', {replace: false,state: {a:1, b:2}}) //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法navigate(-1)}return (<div><button onClick={handle}>按钮</button></div>)
}

4、useParams()

示例代码：
假设现有App路由

function App() {return (<Routes><Route path="user" element={<Users />}><Route path=":id" element={<UserDetail />} /><Route path="create" element={<NewUser />} /></Route></Routes>);
}

那么在UserDetail内部需要用useParams来获取对应的参数

import { useParams } from "react-router-dom";export default function UserDetail() {let params = useParams();return <h2>User: {params.id}</h2>;
}

5、useSearchParams()

1、作用：用于读取和修改当前位置的 URL 中的查询字符串。

2、返回一个包含两个值的数组，内容分别为：当前的search参数、更新search的函数。

示例代码：

import React from 'react'
import {useSearchParams} from 'react-router-dom'export default function Detail() {const [search,setSearch] = useSearchParams()const id = search.get('id')const title = search.get('title')const content = search.get('content')return (<ul><li><button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button></li><li>消息编号：{id}</li><li>消息标题：{title}</li><li>消息内容：{content}</li></ul>)
}

6、useLocation()

作用：
获取当前 location 信息，对标5.x中的路由组件的location属性。

示例代码

import React from 'react'
import {useLocation} from 'react-router-dom'export default function Detail() {const x = useLocation()console.log('@',x)// x就是location对象: /*{hash: "",key: "ah9nv6sz",pathname: "/login",search: "?name=zs&age=18",state: {a: 1, b: 2}}*/return (<ul><li>消息编号：{对应id}</li><li>消息标题：{对应标题}</li><li>消息内容：{对应内容}</li></ul>)
}

7、useMatch()

作用：
返回当前匹配信息，对标5.x中的路由组件的match属性。
示例代码：

<Route path="/login/:page/:pageSize" element={<Login />}/>
<NavLink to="/login/1/10">登录</NavLink>//Login组件
export default function Login() {const match = useMatch('/login/:x/:y')console.log(match) //输出match对象//match对象内容如下：/*{params: {x: '1', y: '10'}pathname: "/LoGin/1/10"  pathnameBase: "/LoGin/1/10"pattern: {path: '/login/:x/:y', caseSensitive: false, end: false}}*/return (<div><h1>Login</h1></div>)
}

8、useInRouterContext()

作用：如果组件在 <Router> 的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。

9、useOutlet()

作用：
用来呈现当前组件中渲染的嵌套路由。

示例代码：

const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

10、useResolvedPath()

作用：
给定一个 URL值，解析其中的：path、search、hash值。

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

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

相关文章

Java并发04之线程同步机制

Java并发04之线程同步机制

文章目录 1 线程安全1.1 线程安全的变量1.2 Spring Bean1.3 如果保证线程安全 2 synchronized关键字2.1 Java对象头2.1.1 对象组成部分2.1.2 锁类型2.1.3 锁对象 2.2 synchronized底层实现2.2.1 无锁状态2.2.2 偏向锁状态2.2.3 轻量级锁状态2.2.4 重量级锁2.2.5 锁类型总结2.2.…
阅读更多...
C++11 容器emplace方法刨析

C++11 容器emplace方法刨析

如果是直接插入对象 push_back()和emplace_back()没有区别但如果直接传入构造函数所需参数&#xff0c;emplace_back()会直接在容器底层构造对象&#xff0c;省去了调用拷贝构造或者移动构造的过程 class Test { public:Test(int a){cout<<"Test(int)"<<…
阅读更多...
链表（4） ----跳表

链表（4） ----跳表

跳表&#xff08;Skip List&#xff09;是一种随机化的数据结构&#xff0c;用于替代平衡树&#xff08;如 AVL 树或红黑树&#xff09;。它是基于多层链表的&#xff0c;每一层都是上一层的子集。跳表可以提供与平衡树相似的搜索性能&#xff0c;即在最坏情况下&#xff0c;搜…
阅读更多...
zlgcan,周立功Can设备，Qt中间件，QtCanBus插件，即插即用

zlgcan,周立功Can设备，Qt中间件，QtCanBus插件，即插即用

新增zlgcan插件&#xff0c;需要请看下方视频回复联系&#xff01; 视频链接地址&#xff1a; Qt,canbus manager,周立功,zlgcan插件演示,需要请留言_哔哩哔哩_bilibili
阅读更多...
反爬虫策略中的IP地址轮换如何实现？挑战与对策

反爬虫策略中的IP地址轮换如何实现？挑战与对策

当今互联网时代&#xff0c;各类网站、网络平台背后隐藏着大量数据&#xff0c;广告数据收集、市场数据收集都需要依托爬虫技术&#xff0c;但很多网站通过反爬虫技术限制或屏蔽爬虫的访问&#xff0c;这给数据收集带来不小的挑战。 为了规避这些反爬虫策略&#xff0c;开发人…
阅读更多...
JVM--内存分配与回收策略

JVM--内存分配与回收策略

1.前言 对象的内存分配&#xff0c;从概念上讲&#xff0c;应该都是在堆上分配&#xff08;而实际上也有可能经过即时编译后被拆散 为标量类型并间接地在栈上分配 &#xff09;。在经典分代的设计下&#xff0c;新生对象通常会分配在新生代中&#xff0c;少数 情况下&#xff0…
阅读更多...
计数，桶与基数排序

计数，桶与基数排序

目录 一. 计数排序 概念 步骤思路如下 实现代码如下 时间复杂度与空间复杂度 1. 时间复杂度 2. 空间复杂度 计数排序的特点 二. 桶排序 概念 步骤思路如下 实现代码如下 时间复杂度与空间复杂度 1. 时间复杂度 2. 空间复杂度 桶排序的特点 三. 基数排序 概念 步…
阅读更多...
Java核心API——Collection类

Java核心API——Collection类

Collection类简介 * java集合框架 * java.util.Collection接口&#xff0c;是所有集合的顶级接口&#xff0c;规定了集合所必须的功能 * <p> * 集合与数组一样&#xff0c;可以保存一组具有相同类型元素数据结构 * 并且提供了对于元素的维护操作(方法)。 * 集合有多种不…
阅读更多...
千万罚单，稠州商业银行屡教不改？

千万罚单，稠州商业银行屡教不改？

撰稿|芋圆 来源|贝多财经 今年&#xff0c;浙江稠州商业银行&#xff08;以下简称“稠州商行”&#xff09;似乎进入了多事之秋&#xff0c;刚刚兼并两家经营不善的村镇银行就紧接着收到大额罚单。 该行在2023年的经营业绩不算难看。据2023年年报&#xff0c;稠州商行的业绩从…
阅读更多...
PHP 调用 1688 详情 API 接口的实战攻略

PHP 调用 1688 详情 API 接口的实战攻略

在电商领域&#xff0c;获取准确和详细的商品信息对于业务的发展至关重要。1688 作为国内知名的批发采购平台&#xff0c;其详情 API 接口为开发者提供了丰富的数据资源。本文将为您详细介绍如何使用 PHP 调用 1688 详情 API 接口。 一、前期准备 注册 1688 开放平台账号&#…
阅读更多...
L2TP（Client-initiated模式）over IPSEC远程拨号实验

L2TP（Client-initiated模式）over IPSEC远程拨号实验

一、实验目的及拓扑 实验目的&#xff1a;通过L2TP客户端与LNS服务端建立L2TP隧道并承载在IPSEC网络上。其中L2TPoverIPsec客户端采用windows软终端模式&#xff08;Cloud3&#xff09;&#xff0c;AR1上将内网LNS&#xff08;FW1&#xff09;服务器采用NAT方式向外网进行映射…
阅读更多...
基于深度学习的水果识别系统

基于深度学习的水果识别系统

1. 引言 随着计算机视觉技术的快速发展&#xff0c;基于深度学习的水果识别系统在农业、超市等场景中具有广泛的应用前景。例如&#xff0c;在农业中&#xff0c;水果识别系统可以帮助农民自动分类和计数水果&#xff0c;从而提高效率并减少人工成本&#xff1b;在超市中&…
阅读更多...
【机器学习】使用Python的dlib库实现人脸识别技术

【机器学习】使用Python的dlib库实现人脸识别技术

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、引言二、传统人脸识别技术1. 基于几何特征的方法2. 基于模板匹配的方法3. 基于统计学习的方法 三、深度学习在脸识别中的应用1. 卷积神经网络&#xff08;CNN&#xff09;2. FaceNet和ArcFace 四、使用Python和dlib库实…
阅读更多...
Spring1（开发工具安装及配置 初始Spring 解耦实现 SpringIOC SpringDI Spring常见面试题）

Spring1（开发工具安装及配置 初始Spring 解耦实现 SpringIOC SpringDI Spring常见面试题）

目录 一 、开发工具安装及配置 IDEA简介 安装 配置 常⽤快捷键 部署maven 1.配置环境​编辑 2.创建一个maven项目​编辑 选择maven​编辑​编辑 二、初始Spring Spring历史由来 Spring体系结构 Spring生态系统 三、解耦实现 jdbc 三层思想​编辑 四…
阅读更多...
leetcode_26. 删除有序数组中的重复项

leetcode_26. 删除有序数组中的重复项

leetcode_26. 删除有序数组中的重复项 leetcode链接 题目描述 给你一个 非严格递增排列 的数组 nums &#xff0c;请你** 原地** 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums…
阅读更多...
可视化剪辑，账号矩阵，视频分发，聚合私信一体化营销工具 源----代码开发部署方案

可视化剪辑，账号矩阵，视频分发，聚合私信一体化营销工具 源----代码开发部署方案

可视化剪辑&#xff1a; 为了实现可视化剪辑功能&#xff0c;可以使用流行的视频编辑软件或者开发自己的视频编辑工具。其中&#xff0c;通过设计用户友好的界面&#xff0c;用户可以简单地拖拽和放大缩小视频片段&#xff0c;剪辑出满足需求的视频。在开发过程中&#xff0c;可…
阅读更多...
SQL进阶

SQL进阶

目录 SQL索引 SQL索引 索引 作用帮助数据库管理系统高效获取数据的数据结构 数据处理分类 OLTP&#xff08;联机事务处理&#xff09;OLAP&#xff08;联机分析处理&#xff09;一般用于处理客户的事务和进行查询一般用于市场的数据分析&#xff08;数据量通常很大&#xff0…
阅读更多...
JDK版本详解

JDK版本详解

Oracle JDK 和 OpenJDK 的对比 Oracle JDK版本将每三年发布一次&#xff0c;而OpenJDK版本每三个月发布一次&#xff1b;OpenJDK 是一个参考模型并且是完全开源的&#xff0c;而Oracle JDK是OpenJDK的一个实现&#xff0c;并不是完全开源的&#xff1b;Oracle JDK 比 OpenJDK …
阅读更多...
多源字段聚合重塑算法

多源字段聚合重塑算法

要求如下 [[{"oone": "评估是否聘请第三方机构","otwo": null,"othree": "test",},{"oone": "评估是否聘请第三方机构","otwo": null,"othree": "test",}],[{"oon…
阅读更多...
python爬虫获取网易云音乐评论歌词以及歌曲地址

python爬虫获取网易云音乐评论歌词以及歌曲地址

python爬虫获取网易云音乐评论歌词以及歌曲地址 一.寻找数据接口二.对负载分析三.寻找参数加密过程1.首先找到评论的请求包并找到发起程序2.寻找js加密的代码 四.扣取js的加密源码1.加密函数参数分析①.JSON.stringify(i0x)②bse6Y(["流泪", "强"])③bse6Y…
阅读更多...
最新文章

Copyright @ 2022~2023