关于react-router的踩得那些坑： export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router‘报错

已于 2022-05-09 12:33:13 修改
阅读量4.8k 收藏 2
点赞数 2
文章标签： react.js javascript 前端
于 2022-02-14 22:18:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/world12312312/article/details/122933156
版权

今天写react项目出现了个报错，前前后后整了两个多小时，这里分享一下，避免踩坑

在react中使用react-router-config进行路由管理，而在我安装引入之后就出现以上报错，

我只好顺着错误去看看react-router-config的源码，这里发现react-router-config使用的竟然还是react-router v5的Switch，我的react-router-dom是^6，所以才产生了报错。

这里把router版本改成v5即可

如果你使用的v6版本，直接使用useRoutes这个钩子就能实现集中管理

不了解v6的小伙伴可以自行查阅下官网React Router | Docs Home

故居风
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
安装npm install react-router-cache-route --save# oryarn add react-router-cache-route用法用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由）...
React使用router时报错export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router‘解决
Rice_w的博客
07-30 2200
但是，我已经安装过了router相关的依赖，并且已经引入，查找原因，发现是安装react-router-dom版本过低的原因，这是。最近在学习React的时候，使用路由时遇到一个问题，就是每当我一引入路由时，就会报错，提示应当引入switch。...
5.react-router-dom v6使用useRoutes踩坑点
weixin_44617133的博客
07-06 574
1.路由表 需要用.tsx或.jsx，否则使用赋值给element会报错。2)需要引入Suspense包裹，否则路由未加载，页面会报错。1)使用useRoutes生成路由组件，再放进，否则会报错。2.useRoutes()生成路由。useRoutes的用法。
【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。就可以解决以上报错啦。
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
使用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'
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) 嵌套路由变得更简单
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:
Switch‘ (imported as ‘Switch‘) was not found in ‘react-router-dom‘
qq_45679015的博客
02-13 698
问题：使用<Switch>标签报错 原因：最新版本是"react-router-dom": "^6.2.1"已经将Switch改为Routes。 解决： （1）将<Switch>标签改为<Routes>标签 （2）卸载原先版本，再安装6以下的版本 npm uninstall react-router-dom npm install react-router-dom@5 ...
react-router-native-stack：用于react-router-native的堆栈导航组件
02-05
react-router-native-stack React Native上的React Router v4的堆栈组件。免责声明该库处于Alpha状态。 我仍在尝试过渡和动画，API可能会发展和变化。 我希望您能尝试一下并提供反馈，以便我们可以进入生产就绪状态...
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-animation-examples：使用React Router和React动画的示例
02-05
在此示例中，我仅使用react-router但在我看来，我们不能仅使用路由器从一个屏幕导航到另一个屏幕。 因为显然路线将会改变，您将失去先前显示的屏幕。 在移动应用程序中，这并非总是想要的效果。 也许我们可以将...
react-router-page-transition：您的React Router的高度可定制的页面过渡组件
02-04
当前尚不完全支持react-router 4，请参阅。 介绍 React Router很棒，但是很难在页面之间进行转换，尤其是对于复杂的页面。 不用担心react-router-page-transition可以为您提供帮助。 您可以使用css通过自定义数据...
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...
create-react-app初始化后，增加路由，及报错 ‘Switch‘ is not exported from ‘react-router-dom‘. 的处理
糖豆叭叭博客
11-10 1803
#### create-react-app初始化后，增加路由 ``` npm install --save react-router-dom ``` 当前最新的react-router-dom版本 ``` "react-router-dom": "6.0.2", ``` #### 修改App.js代码 ``` import './App.css'; import React from 'react'; // 路由使用 history模式 import { BrowserRouter
export ‘withRouter‘ (imported as ‘withRouter‘) was not found in ‘react-router-dom‘ 问题解决
wejack的专栏
02-16 1623
export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' 问题解决
react-router-config
fanfan_nancy的专栏
12-31 2338
Attempted import error: 'Switch' is not exported from 'react-router'.
React-router报错Link' is not exported from 'react-router'
weixin_43254676的博客
07-25 5025
问题 按照官网示例通过npm安装了react-router npm install --save react-router 官网示例中使用react-router的例子中，有这样一句引用 import { Router, Route, Link } from ‘react-router’ 按照官网示例中使用时候发现报错 解决 中文文档更新滞后的缘故，最新官方文档的说明https://reac...
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、付费专栏及课程。

余额充值