react 路由 V6新特性总结
1、Switch 单一匹配 变为Routes
2、component / render 变为 element
3、默认显示路由添加index属性，默认为true
4、Redirect 组件取消 变为 Navigate
5、使用useNavigate替代了useHistory
使用useNavigate替代了useHistory用来跳转路由并能传递参数
6、v6移出了WithRouter，添加了一些新的hooks
因为v6移出了WithRouter，所以组件的props不能直接拿到history，location，match；所以v6在v5的基础上添加了一些新的hooks便于我们对于路由值传递（useParams,useLocation,useSearchParams）
1、通过search与state传递的参数我们可以通过useLocation()对象中获取；const {state，search} = useLocation()
2、search传递的参数是最后接收的结果是查询字符串?id=xx&name=xxx；可以通过useSearchParams()中的方法来获取其search参数值；import { useSearchParams} from 'react-router-dom'const [searchParams, setSearchParams] = useSearchParams();console.log('searchParams',searchParams.get("id"))3、通过params动态路由的方式传递的参数，使用useParams()可以获取，其直接是个对象;const {xxx} = useParams()
7、使用useRoutes替代了v5的react-router-config
创建一个router文件，导出配置路由表
创建路由映射表
export default [{path: '/',element: <Navigate to="/login" />},{path: '/login',element: <Login />},{path: '/main/:hjg',element: <Main />,children: [{index: true,element: <Navigate to="default" />},{path: 'default',element: <MainDefault />},{path: 'docmanage',element: <DocManage />,},{path: 'docteam',element: <DocTeam />},{path: 'join',element: <Join />}]},{path: '*',element: <Page404 />},
]
import React from "react";
import {useRoutes} from "react-router-dom"
import routes from './router' //引入路由表import './App.css'
function App() {const element = useRoutes(routes) //使用useRoutes()生成 <Route path='/user' element={<User />}></Route>结构return (<>{element}//使用路由表</>);
}export default App;
8、导出了Outlet组件，类似于vue的router-view
子路由的显示位置,配合Link与NavLink显示子路由页面位置
<><Title level={4}>家庭医生管理</Title><ul><li><NavLinkto="/main/docmanage/add"activeClassName='active'isActive={(match, location) => {console.log(match, location)if (match.url ||match === null) {return true}}}>增加</NavLink></li><li><NavLink to="/main/docmanage/del" activeStyle={{ backgroundColor: 'pink', color: 'white' }}>删除</NavLink></li><li><NavLink to="/main/docmanage/look">查看</NavLink></li><li><NavLink to="/main/docmanage/modify">修改</NavLink></li></ul>{/* 三级路由 */}<Outlet></Outlet></>
9、大小从20kb减小到8kb
react 路由 V6新特性总结相关推荐
- React Router V6 新特性
安装 npm install react-router-dom@6 配置路由 import { render } from "react-dom"; import {Browser ...
- React 路由 V6
React 路由 概述 安装路由 引入 路由的使用 HashRouter BrowserRouter Routes 与 Route Link NavLink Navigate Outlet 新增 Ho ...
- React路由V6技术文档
React Router 6 快速上手 1.概述 React Router 以三个不同的包发布到 npm 上,它们分别为: react-router: 路由的核心库,提供了很多的:组件.钩子. rea ...
- 稳定性大幅度提升：SOFARegistry v6 新特性介绍
SOFARegistry 是蚂蚁集团内部在使用的服务注册中心,它支撑起了蚂蚁集团海量规模的业务服务.但随着蚂蚁集团业务规模的日渐庞大,SOFARegistry 在资源.容量.运维等方面也遇到了一些挑战 ...
- react 数组新增_React 新特性 Hooks 讲解及实例(二)
本文是 React 新特性系列的第二篇,第一篇请点击这里: React 新特性讲解及实例 什么是 Hooks Hook 是 React 16.8 的新增特性.它可以让你在不编写 类组件 的情况下使用 ...
- k8s v1.17 新特性预告: 拓扑感知服务路由
大家好,我是 roc,来自腾讯云容器服务(TKE)团队,今天给大家介绍下我参与开发的一个 k8s v1.17 新特性: 拓扑感知服务路由. 01 名词解释 拓扑域: 表示在集群中的某一类 " ...
- 你必须了解的 React 18 新特性
你必须了解的 React 18 新特性 你必须了解的 React 18 新特性 1. React 18是什么? 2. 升级到 React 18 3. React 17 的问题 4. React 18 ...
- 那些激动人心的React,Webpack,Babel的新特性对于我们开发体验带来哪些提升
(Webpack 4.0+, React 16.0.0+, Babel 7+) 作者: 赵玮龙 写在开头: 在怀着激动和忐忑的心情写出团队第一篇文章时,这个兴奋感一方面来自团队组建以来这是我们首次对外 ...
- WCF4.0新特性体验(6):路由服务Routing Service（下）
紧接前文WCF4.0新特性体验(5):路由服务Routing Service(上).今天我们介绍WCF4.0消息路由的实现机制,然后会讲解路由服务的实现过程. [4]WCF与路由服务: 其实在介绍WC ...
- React 新特性 Hooks 讲解及实例(四)
想优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 使用 Ref Hooks 类组件中使用 Ref 一般有: String Ref Callback Ref CreateRef 上述在函数组 ...
最新文章
- java stopwatch 功能
- Vue.js入门教程-组件注册
- 基于java的订餐系统设计(含源文件)
- 桌面时钟代码_被遗忘的手机桌面小部件
- oracle删除临时表空间语句,Oracle中临时表空间的清理
- javaWeb保存时间到数据库
- javaweb编辑器ckeditor配置_ckeditor编辑器在java项目中配置
- 解除mysql只有本机可以访问的限制
- Client network socket disconnected before secure TLS connection was establishedView in Conso
- Android开发之殇
- Dart中的Isolate
- Excel学习日记：L33-二八法则的神奇图表-柏拉图（帕累托图）
- 爬取QQ音乐中一首歌的相关信息及评论（破解反爬虫、多协程队列爬虫）
- FPGA的三个时代，最初三十年的回顾（附原英文资料）
- python package dist-info
- linux rzsz(lrzsz)安装
- 正则表达式的用法及手机号码Email地址是否合法身份证号码是否合法邮政编码
- storm 开发实例
- matlab西塔怎么打出来,龙珠超70话：格兰成宇宙最强，代价并不严重
- 如何用iframe标签以及Javascript制作时钟？