react-router-dom 降低版本的两种方法详解

目录
  • 前言
  • 1. 使用 npm 命令降低到指定版本
  • 2.手动修改 package.json 文件，然后 npm install

前言

react-router-dom 如今已经升级到了 V6 版本，相比较 V5 版本，变化还是挺大的。如今使用 npm install react-router-dom -S 命令来下载 react-router-dom ，会自动下载 V6 版本， V6 版本会在接下来的一段时间内成为主流。不过对于用习惯了 V5 版本的开发者而言，自然是有些不习惯。本篇文章就记录下如何降低 react-router-dom 为 v5 版本的两种方法。

1. 使用 npm 命令降低到指定版本

npm install react-router-dom@版本号 -S

// 比如
npm install react-router-dom@5.2.1 -S

2.手动修改 package.json 文件，然后 npm install

Tips: 个人建议使用第一种 npm 命令的形式。

如果使用上述方法后 react-router-dom 报错，可以尝试下以下方法解决：

1、删除 node_modules 文件夹，然后重新 npm install 下载

如果删除后重新下载，react-router-dom 仍然报错，则使用下述命令：

 npm i --save @types/react-router-dom

Tips: 该命令要在使用过上述两种方法之一后在使用

基本上到这里，版本号就成功的降为了指定版本，页面中的 react-router-dom 也不会报错。

接下来，我会慢慢更新 react-router-dom V5版本 与 v6版本 的区别以及写法，毕竟 V6版本在接下来相当一段时间内会是主流，大家还是尽快熟悉 V6 版本的特性为好。

到此这篇关于react-router-dom 降低版本的两种方法的文章就介绍到这了,更多相关react-router-dom版本降低内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react-router-dom简介(推荐)

    目录 react-router-dom 1. 安装 2. 路由组件 2.1 路由组件 2.2 路由匹配组件 2.3 导航组件 3. 使用 3.1 基本使用 3.2 Route动态传参 3.3 嵌套路由 3.4 路由重定向 3.5 滚动还原 3.6 路由守卫 3.7代码分割 3.8 withRouter 3.9 其他hooks react-router-dom react-router-dom文档地址: https://reacttraining.com/react-router/ 1. 安装 r

  • react-router-domV6版本的路由和嵌套路由写法详解

    目录 1-单级路由 2-嵌套路由(about路径进行嵌套) ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</NavLink> <Routes>   <Route path='/home' element={<Home/>}/>   <R

  • 详解react-router-dom v6版本基本使用介绍

    目录 Routes Route Navigate NavLink useRoutes 嵌套路由 路由传参 编程式导航 Routes 代替Switch组件,不会向下匹配 用来包裹Route Route 必须被Routes组件包裹 component属性变成element caseSensitive 路径大小写敏感属性,默认是不敏感(访问/about = /ABOUT) index 与path属性是互斥的,index表示为当前路由的根 可以用作layout组件,不写element属性,写了要与 Ou

  • react-router-dom v6 通过outlet实现keepAlive 功能的实现

    react-router-dom v6 通过outlet实现keepAlive 功能的实现

    本文主要介绍了react-router-dom v6 通过outlet实现keepAlive 功能的实现,具体如下: keepAlive代码: import React, { useRef, useEffect, useReducer, useMemo, memo } from 'react' import { TransitionGroup, CSSTransition } from 'react-transition-group' import { useLocation } from 'r

  • react-router-dom6(对比 router5)快速入门指南

    react-router-dom6(对比 router5)快速入门指南

    目录 React Router 6 快速上手 1.概述 2.基本使用 3.重定向 4.NavLink高亮 5.useRoutes路由表 6.嵌套路由(Outlet) React Router 6 快速上手 在之前的文章中,我们已经学习了react-router-dom v5的内容,在react-router-dom v6版本中,对旧版本的API以及一些组件做了些许修改.本文开始,我将带大家学习最新的react-router-dom v6版本的路由知识,并且会与v5老版本进行一些对比. 需要学习r

  • react-router-dom 嵌套路由的实现

    入口文件index.js: import React from "react" import ReactDOM from "react-dom" import App from "./App.jsx" import "babel-polyfill" const root = document.getElementById("app") if (root !== null) { ReactDOM.render

  • react-router-dom入门使用教程(路由的模糊匹配与严格匹配)

    react-router-dom入门使用教程(路由的模糊匹配与严格匹配)

    目录 模糊匹配 开启严格匹配 Redirect的使用 嵌套路由使用 模糊匹配 <!-- 编写路由链接 --> <NavLink to="/home/a/b">Home</NavLink> <!-- 注册路由 --> <Switch> <Route path="/home" component={Home} /> </Switch> 点击Home,进入路径/home/a/b,此时模糊匹

  • react-router-dom 降低版本的两种方法详解

    目录 前言 1. 使用 npm 命令降低到指定版本 2.手动修改 package.json 文件,然后 npm install 前言 react-router-dom 如今已经升级到了 V6 版本,相比较 V5 版本,变化还是挺大的.如今使用 npm install react-router-dom -S 命令来下载 react-router-dom ,会自动下载 V6 版本, V6 版本会在接下来的一段时间内成为主流.不过对于用习惯了 V5 版本的开发者而言,自然是有些不习惯.本篇文章就记录下

  • 基于ScheduledExecutorService的两种方法(详解)

    开发中,往往遇到另起线程执行其他代码的情况,用java定时任务接口ScheduledExecutorService来实现. ScheduledExecutorService是基于线程池设计的定时任务类,每个调度任务都会分配到线程池中的一个线程去执行,也就是说,任务是并发执行,互不影响. 注意,只有当调度任务来的时候,ScheduledExecutorService才会真正启动一个线程,其余时间ScheduledExecutorService都是处于轮询任务的状态. 1.scheduleAtFix

  • 使用Java构造和解析Json数据的两种方法(详解二)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Json数据的方法

  • 使用Java构造和解析Json数据的两种方法(详解一)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Json数据的方法

  • 对python捕获ctrl+c手工中断程序的两种方法详解

    日常编写调试运行程序过程中,难免需要手动停止,以下两种方法可以捕获ctrl+c立即停止程序 1.使用python的异常KeyboardInterrupt try: while 1: pass except KeyboardInterrupt: pass 2.使用signal模块 def exit(signum, frame): print('You choose to stop me.') exit() signal.signal(signal.SIGINT, exit) signal.sign

  • Python获取网络时间戳的两种方法详解

    目录 方法一 代码实现 调用方法 返回结果 方法二 代码实现 调用方法 返回结果 在我们进行注册码的有效期验证时,通常使用获取网络时间的方式来进行比对. 以下为获取网络时间的几种方式. 方法一 需要的时间会比较长,个别电脑上可能会出现不兼容现象 代码实现 def get_web_server_time(self, host_URL, year_str='-', time_str=':'): ''' 获取网络时间,需要的时间会比较长,个别电脑上可能会出现不兼容现象 :param host_URL:

  • Java实现Excel转PDF的两种方法详解

    Java实现Excel转PDF的两种方法详解

    目录 一.使用spire转化PDF 1.使用spire将整个Excel文件转为PDF 2.指定单个的sheet页转为PDF 二.使用jacob实现Excel转PDF(推荐使用) 1.环境准备 2.执行导出PDF 使用具将Excel转为PDF的方法有很多,在这里我给大家介绍两种常用的方法,分别应对两种不一样的使用场景,接下来我在springboot环境下给大家做一下演示! 一.使用spire转化PDF 首先介绍一种比较简单的方法,这种方法可以使用短短的几行代码就可以将我们的Excel文件中的某一个

  • SpringBoot处理接口幂等性的两种方法详解

    目录 1. 接口幂等性实现方案梳理 1.1 基于 Token 1.2 基于请求参数校验 2. 基于请求参数的校验 在上周发布的 TienChin 项目视频中,我和大家一共梳理了六种幂等性解决方案,接口幂等性处理算是一个非常常见的需求了,我们在很多项目中其实都会遇到.今天我们来看看两种比较简单的实现思路. 1. 接口幂等性实现方案梳理 其实接口幂等性的实现方案还是蛮多的,我这里和小伙伴们分享两种比较常见的方案. 1.1 基于 Token 基于 Token 这种方案的实现思路很简单,整个流程分两步:

  • Python比较两个日期的两种方法详解

    Python比较两个日期的两种方法详解

    目录 datetime strptime 之前我们曾经分享过:Python获取某一日期是“星期几”的6种方法!实际上,在我们使用Python处理日期/时间的时候,经常会遇到各种各样的问题.今天我们就来探讨另一个问题,如何用Python比较两个日期? datetime 如果需要用Python处理日期和时间,大家肯定会先想到datetime.time.calendar等模块.在这其中,datetime模块主要是用来表示日期时间的,就是我们常说的年月日/时分秒. datetime模块中常用的类: 类名

  • Python识别二维码的两种方法详解

    Python识别二维码的两种方法详解

    目录 前言 pyzbar + PIL cv2 前言 最近在搜寻资料时,发现了一则10年前的新闻:二维码将成线上线下关键入口.从今天的移动互联网来看,支付收款码/健康码等等与我们息息相关,二维码确实成为了我们生活中不可或缺的一部分. 在学习Python处理二维码的过程中,我们看到的大多是“用python生成酷炫二维码”.“用Python制作动图二维码”之类的文章.而关于使用Python批量识别二维码的教程,并不多见.所以今天我会给大家分享两种批量识别二维码的Python技巧! pyzbar + P

随机推荐