React Router@3.x 升级到 @6.x 的实战

一、概述

目前公司产品有关 react 的工具版本普遍较低,其中react router版本为 3.x(是的,没有看错,3.x 的版本,4年前的版本)。而最新的 react router 已经到了 6.x 版本。

为了能够跟上路由的脚步,也为了使用 router 相关的 hooks 函数,一次必不可少的升级由此到来!由于 react-touter 6.x 需要依赖react 和 react-dom ,所以我们的项目需要满足以下条件:

"peerDependencies": {"react": ">=16.8","react-dom": ">=16.8"
}

目前,react router最新的版本是6.14.0,所以确定使用 react-router-dom: 6.14.0作为目标升级版本。是的,跳过了v4/v5 版本,直接上 v6 一步到位。

二、React Router 升级

2.1 组件引用

在 v6 版本,react router的包可以分为了 3 个包:

  • react-router : 核心包,只提供核心的路由和 hook 函数,不会直接使用
  • react-router-dom :供浏览器/Web 应用使用的 API。依赖于 react-router, 同时将 react-router 的 API 重新暴露出来
  • react

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

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

相关文章

获取当前线程中的请求属性的静态方法

RequestContextHolder.getRequestAttributes() 是 Spring 框架中用于获取当前线程中的请求属性的静态方法。它通常在 Web 应用中使用,用于访问当前请求的上下文信息。在 Spring 的 Web 应用中,每个请求都会有一个对应的请求上下文,其中包含了…

【数据库】P0 创建数据库环境 MySQL + DataGrip

创建数据库环境 下载安装 MySQL下载安装 DataGrip 下载安装 MySQL Windows版本_MySQL 下载地址: https://dev.mysql.com/downloads/mysql/ 下载后依照默认顺序安装即可,本博文将讲述简约安装步骤; 如需详细安装步骤可见:https:/…

4.1、Flink任务怎样读取集合中的数据

1、API说明 非并行数据源: def fromElements[T: TypeInformation](data: T*): DataStream[T] def fromCollection[T: TypeInformation](data: Seq[T]): DataStream[T] def fromCollection[T: TypeInformation] (data: Iterator[T]): Data…

【设计模式】观察者模式

什么是观察者模式? 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态…

leetcode做题笔记64

给定一个包含非负整数的 m x n 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小。 说明:每次只能向下或者向右移动一步。 思路一:动态规划 int minPathSum(int** grid, int gridSize, int* gridColSi…

STM32 CubeMX USB_MSC(存储设备U盘)

STM32 CubeMX STM32 CubeMX USB_MSC(存储设备U盘) STM32 CubeMX前言 《使用内部Flash》——U盘一、STM32 CubeMX 设置USB时钟设置USB使能UBS功能选择FATFS功能 二、代码部分修改代码"usbd_storage_if.c"修改代码"user_diskio.c"main函数初始化插…

杭州企业可以用DV https证书吗

DV https证书是入门级的https证书,也可以叫DV基础型https证书,这款https证书企业是可以用的,甚至商城网站、金融网站都可以使用,不限制申请者,个人或者企事业单位都可以申请。DV基础型https证书虽然只是入门级的https证…

全开源跨境电商一键铺货货源平台--后台数据采集功能

数据库设计在设计数据库时,需要考虑到以下信息: 货源信息:包括货源标题、价格、描述、图片等信息。 用户信息:包括用户名、密码、邮箱、电话等信息。 订单信息:包括订单号、用户信息、货源信息、支付信息等。 支付信息…

idea中提示Unsupported characters for the charset ‘ISO-8859-1‘

application.properties中文注释拉黄线 ,提示Unsupported characters for the charset ISO-8859-1 解决办法: 注意: 改完之后之前输入的中文就变成“ ???”了,建议备份一下 1、打开setti…

use erlang

启动 erl说明 .结尾一个语句 -module(geometry). %模块声明,模块名必须与文件名相同。 -export([area/1]). %导出声明,声明可以外部使用的函数 area({rectangle, Width, Height}) -> Width*Height; %子句1 area({square, Side}) -> Side * Side…

QT5.12在windows上边的安装

使用国内镜像源在线安装QT(2023.3.25更新)_qt国内镜像_Iotfsd的博客-CSDN博客 先下载 STEP1:下载qt online installer Index of /official_releases/online_installers (qt.io) STEP1:使用国内镜像源在线安装Qt qDPass(12MB/s) 在《STEP1》下载的…

kubernetes基于helm部署gitlab-operator

kubernetes基于helm部署gitlab-operator 这篇博文介绍如何在 Kubernetes 中使用helm部署 GitLab-operator。 先决条件 已运行的 Kubernetes 集群负载均衡器,为ingress-nginx控制器提供EXTERNAL-IP,本示例使用metallb默认存储类,为gitlab p…

从前序与中序遍历序列构造二叉树,从中序与后序遍历序列构造二叉树

目录 从前序与中序遍历序列构造二叉树从中序与后序遍历序列构造二叉树 从前序与中序遍历序列构造二叉树 题目链接 给定两个整数数组 preorder 和 inorder ,其中 preorder 是二叉树的先序遍历, inorder 是同一棵树的中序遍历,请构造二叉树并返…

基于kubeadm部署K8S集群

目录 基于kubeadm部署K8S集群 一、环境准备 1、主机初始化配置 2、配置主机名并绑定hosts,不同主机名称不同 3、主机配置初始化 二、部署docker环境 1、三台主机上分别部署 Docker 环境 2、镜像加速器(所有主机配置) 三、部署kubern…

valgrind检测内存泄漏

#include <stdio.h> #include <stdlib.h>int main(){int *q (int *)malloc(sizeof(int));*q 1;// int i 1;// if(i 1){// int *p (int *)malloc(sizeof(int));// *p 1;// free(p);// }// free(q)return 0; } 运行查看 valgrind --leak-checkfu…

ChatGLM2-6B在windows下的部署

2023-08-10 ChatGLM2-6B在windows下的部署 一、部署环境 1、Windows 10 专业版&#xff0c; 64位&#xff0c;版本号&#xff1a;22H2&#xff0c;内存&#xff1a;32GB 2、已安装CUDA11.3 3、已安装Anaconda3 64bit版本 4、有显卡NVIDIA GeForce RTX 3060 Laptop GPU …

(leecode)设计循环队列

&#xff08;温馨提示&#xff1a;这是博主最最喜欢的歌曲哦&#xff0c;没有之一&#xff09; 题目&#xff1a; 题解&#xff1a; 思路&#xff1a; 方法一(数组)&#xff1a; 方法二(链表)&#xff1a; 题目&#xff1a; 设计你的循环队列实现。 循环队列是一种线性数…

MATLAB|信号处理的Simulink搭建与研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

PostgreSQL技术沙龙|PPT合集速来下载

新机遇&#xff0c;新态势&#xff0c;新发展 2023年8月5日&#xff0c;由中国开源软件推进联盟PG分会&#xff08;中国PG分会&#xff09;联合杭州云贝教育共同举办的“PostgreSQL技术沙龙杭州站”圆满举行。本次活动结合当下去O、国产化趋势&#xff0c;邀请社群技术专家围…

Vue3.2+TS在v-for的时候,循环处理时间,将其变成xx-xx-xx xx:xx:xx格式,最后教给大家自己封装一个时间hooks,直接复用

Vue3.2TS在v-for的时候&#xff0c;循环处理时间&#xff0c;将其变成xx-xx-xx xx:xx:xx格式 最后教给大家自己封装一个时间hooks&#xff0c;直接复用 1.没有封装&#xff0c;直接使用 <template><div><ul><li v-for"item,index in arr" :k…