React使用router时报错export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router‘解决

最新推荐文章于 2024-02-21 15:00:55 发布
最新推荐文章于 2024-02-21 15:00:55 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： react 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rice_w/article/details/126068125
版权

最近在学习React的时候，使用路由时遇到一个问题，就是每当我一引入路由时，就会报错，提示应当引入switch
在这里插入图片描述
但是，我已经安装过了router相关的依赖，并且已经引入，查找原因，发现是安装react-router-dom版本过低的原因，这是因为在最新版本中router已经替代了Switch，只需指定版本安装react-router-dom就可以了.

npm uninstall react-router-dom
npm install react-router-dom@5
小茹想睡觉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文| 使用缓存为Vue中的keep-alive类的react-router 。 如果只想要<KeepAlive> ，请尝试 React v15 + React-Router v4 + 问题 使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互 原因与解决方案 Route不匹配时，组件将被卸载 阅读源代码之后Route ，我们发现使用children撑起一个功能，可以帮助控制呈现行为。 隐藏而不是删除将解决此问题。 安装 npm install react-router-cache-route --save # or yarn add react-router-cache-route 用法 用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由） impor
export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-rou ter-dom‘ (possible exports:
KaiSarH
05-16 669
export 'Switch' (imported as 'Switch') was not found in 'react-rou ter-dom' (possible exports:
【react中引入时报错问题】Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’
最新发布
m0_59483744的博客
02-21 499
最近在学习react的过程中遇到了下面这个问题，就是switch和redirect的引入问题，我最开始下载react-router-dom插件的时候没有注意版本问题，所以就直接进行下载啦，但是在引入其中组件的时候会遇到一些问题，就是在进行路由重定向时，使用<Redirect></Redirect>这个标签时报错，最后查询到是react-router-dom在下载时要制定版本。1、先卸载之前的react-router-dom。就可以解决以上报错啦。
使用react路由时，export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router‘报错
梨城毒妃的博客
06-07 2322
export 'Switch' (imported as 'Switch') was not found in 'react-router'
export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router-dom‘
热门推荐
小白目的博客
02-27 1万+
一跟着网上做react项目时，代码中以下代码： import { HashRouter, Route, Switch, Redirect } from 'react-router-dom' 出现了以下俩个报错： export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' export 'Redirect' (imported as 'Redirect') was not found in 'react-r
export ‘withRouter‘ (imported as ‘withRouter‘) was not found in ‘react-router-dom‘ 问题解决
wejack的专栏
02-16 1622
export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' 问题解决
react-router-dom export ‘Switch‘ was not found in ‘react-router-dom‘错误解决方法
潘晓宇(panxiaoyu)的专栏
02-27 1158
问题原因，版本问题。 v5Switch可以使用，v6升级后需要调整对应方法 少し古いガイドラインに沿ってアプリ制作をしていたら、いきなりSwitchがないというエラー。 react-router-domのバージョンが原因。v6以降はSwitchがRoutesになり書き方に変更点が数カ所。 ①v5に戻す、②v6の書き方へ変更するの２種類の対処法をまとめました。 対処法① バージョンをv5に戻す 以下のコマンドで、現行バージョンをアンインストールして、v5をインストールし直す。 npm u...
react报：export useHistory (imported as useHistory) was not found in react-router-dom
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
08-31 6702
react-router-dom v4 可以使 withRouter (函数组件里可以用这个方法),当然 也可以直接 this.props.history.push。很明显 这个报错 是说 react-router-dom 里没有 useHistory。这个就涉及 react-router-dom这个插件的版本问题了。react-router-dom v5 是使用 useHistory。问题出在这里了 不同版本差异化，所以用之前需要确认版本。react-router-dom v6 里。..........
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a
前端高薪进击手记
03-09 806
意思是说：v5版本的 react-router-config 包中的所有方法都已经被迁移到了react-router 版本的core核心代码中. 如果你偏向于或者需要把路由定义成JavaScript对象而不是react组件的话，那么你会爱上这种方式，也就是使用useRoutes 方法。这个错误提示是我在配配react的SSR中为了支持路由而报的错误提示。这个错误提示有点奇怪，不是完全的Error提示，而是Warning。万万没想到，搞了我懵逼一天的竟然是一个版本问题。
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React... import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
react-router-CN：React Router V4中文文档
02-19
React路由器 用于的声明式路由组件 文件 包 这是一个基于管理的存储库。我们基于此代码库已经在npm发布了几个包括： 包名 版本 文件 描述 React Router核心组件 用于DOM绑定的React Router 用于的React路由器 ...
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
最近把react-router 升级了一下， 在使用react-router-dom 是，子组件使用this.props.history 找不到了，看看官方文档，找了半天也没找到，因为我是在异步执行完后才跳转页面，需要用到push 或者replace，怎么办啊...
react-router-i18n:建立在React Router之上的国际化库
04-28
yarn add react-router-i18n 请注意，此程序包具有以下对等依赖项： { " react " : " ^16.8.4 " , " react-dom " : " ^16.8.1 " , " react-router-dom " : " ^4.3.0 || ^5.0.0 " } （请参阅项目） 如何使用 ...
【react框架】学习记录9-学习路由react-router-dom的使用
庞囧的博客
07-25 463
文章目录前言安装使用相关组件BrowserRouterLink与Route 前言 附上汉化文档地址 安装 yarn add react-router-dom 使用 相关组件 BrowserRouter 这个组件是history模式的路由器，用于管理包含在内的路由组件，所以一般会直接放在App.jsx外层，在index.js中写： ... import {BrowserRouter} from 'react-router-dom' ReactDOM.render( <BrowserRouter&g
react报错export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router-dom‘
总结前端开发中遇到的问题，分享前端知识
03-30 1811
react-router-dom从V5升级到V6后改变： (1) Switch 重命名为 Routes (2) Route 的新特性变更 ,component/render被element替代 (3) 嵌套路由变得更简单
关于react-router的踩得那些坑： export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router‘报错
world12312312的博客
02-14 4818
今天写react项目出现了个报错，前前后后整了两个多小时，这里分享一下，避免踩坑 我们知道，在react项目里使用路由的集中管理，需要安装react-router-config，而在我安装引入之后就出现以上报错，后面改版本，切node版本，都不好使。 我只好顺着错误去看看react-router-config的源码，这里发现react-router-config使用的竟然还是react-router v5的Switch，，我的react-router-dom是^
react项目实战练习（巩固新学的知识以及遇到的问题）
WANG944282的博客
03-23 2016
1.路由的使用 首先安装 npm install react-router-dom --save-dev； 之后引入，引入的时候，发现跟我学习的资源上有些不同，作出了一些更新，导致会出现一些错误，下面就简单说一下今天的项目实战遇到的问题，还有一个没解决，找了很多资料，等后面解决了再来补充。 遇到的一些error 1.Matched leaf route at location "/Detail" does not have an element. This means it will render a
antd按需加载报错解决方案
sophieLV1993的博客
02-29 2274
在antd按需加载使用时，引用babel-plugin-import插件时项目报错，解决方案如下： （1）引入将less安装版本降至3.0以下版本，2.7.3 yarn add [email protected] (2)修改webpack.config.js文件中babel-loader配置 修改内容如下： 添加代码： ["import", { "libraryName": "antd", "lib...
export 'Switch' (imported as 'Switch') was not found in 'react-router'
01-13
根据提供的引用内容，当在使用`react-router`库时，出现了`export 'Switch' (imported as 'Switch') was not found in 'react-router'`的错误提示时，可能是因为`Switch`组件没有正确导入。这个错误通常发生在使用`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值