关于react路由报错Invariant failed: You should not use ＜Route＞ outside a ＜Router＞

墨听烟

于 2022-09-21 21:19:41 发布

阅读量2.2k

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/m0_58683238/article/details/126980743

版权

在今天使用路由练习的时候，发现莫名出现Invariant failed: You should not use <Route> outside a <Router>的报错

搜索后发现其实是因为安装的版本问题，在v5版本中，Switch标签代表只显示范围内的第一个匹配上的组件，而在v6版本中Switch被Router代替，而路由必须写在Router之中，这点在v5中并没有对Switch进行强调，所以才会进行报错

解决：将Switch替换为Router即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

墨听烟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

＜前端路由原理＞react-router-dom入门级教程

Coding and studying

07-06

3954

1. 什么是路由？2. 路由分类前端路由依靠的是浏览器的BOM对象中的history，也就是浏览器的历史记录（history）。但我们一般不直接操作BOM身上的history，而是借助history.js去操作BOM。history模式的路由： hash模式的路由：（地址栏中带有 # 号）浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。重要是事情说三遍。每当执行push操作时，都是将path推入栈顶，浏览

React 路由报错 You should not use <Route> or withRouter() outside a <Router>

热门推荐

Jane_96的博客

12-03

1万+

App.js在中的代码 import React, {Component , Fragment} from 'react'; import {withRouter , Route , Switch , Redirect} from 'react-router-dom'; import './App.css'; import 'antd/dist/antd.css' import Home from...

1 条评论您还未登录，请先登录后发表或查看评论

React-路由跳转报错:Error: Invariant failed: You should not use ＜withRouter(App) /＞ outside a ＜Router＞

Cao_Mary的博客

04-21

6817

报错：Error: Invariant failed: You should not use <withRouter(App) /> outside a 问题描述：使用history的push方法手动跳转路由。结果报错问题原因：如果一个组件要使用路由创建, 那么这个组件必须包裹在BrowserRouter, HashRouter中解决办法：将组件包裹在BrowserRouter,或HashRouter中即可 ...

【已解决】Error: Invariant failed: You should not use ＜withRouter(RouterView) /＞ outside a ＜Router＞

程序边界

02-23

2559

文章目录 Error: Invariant failed: You should not use <withRouter(RouterView) /> outside a <Router> 问题代码： import React, {Component} from 'react'; import {BrowserRouter as Router, Route, Switch, withRouter} from 'react-router-dom'; import * as A fro

React路由报错You should not use <Switch> outside a <Router>

小米人的博客

09-10

4968

修改方式用Router替换掉Switch import React, { Component } from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom' import AllComponents from '../components/index' import routesConfig fro...

初学react - 报错You should not use withRouter(Home) outside a Router 的解决

sunshime的博客

03-23

4096

报错：解决方法：在主文件index.js文件（src文件夹下面的index.js）中使用 BrowserRouter 将引入的文件包裹起来。

＜withRouter(Connect(““)) /＞ outside a ＜Router＞和 You should not use ＜Switch＞ outside a ＜Router＞问题处理

仝齾翯郻龏的博客

08-02

3507

1. 问题描述这几天在处理前端时遇到一个特别坑问题, 先上代码路由页面 const Pages = () => ( <div> <BrowserRouter> <Switch> <Route path="/shopping" component={Shopping} /> <Route path="/annonces" component={Announce} /> &l

react中router路由传参和路由的集中管理

weixin_45745641的博客

03-26

1759

文章目录前言路由传参1.使用:id进行传参：2.路由拼接参数传参3.对象形式传参路由集中管理路由集中管理之子路由前言这篇文章来记录一下在react路由中如何进行路由传参，还有如何进行路由的集中管理路由传参 1.使用:id进行传参： <BrowserRouter> <ul> <li><Link to='/user/:id'>用户中心</Link></li> <li><Lin

react router 4.0以上的路由应用详解

08-29

在React Router 4.x之前，你可以将嵌套的路由直接放在`<Route>`标签内部，如下所示： ```jsx <Route component={App}> <Route path="groups" components={Groups} /> <Route path="users" components={Users}> ...

React引入jsx文件报错Module parse failed: Unexpected token

weixin_42260975的博客

04-02

9705

引入jsx文件报错Module parse failed: Unexpected token routerConfig.js: import React from "react"; import ReactDOM from 'react-dom' import Page1 from './pages/Page1.jsx' ReactDOM.render( <Page1/>, ...

react 报错You should not use xx outside a 「Router」

weixin_43294560的博客

07-02

1496

不能将使用了react-router-dom的组件暴露在BrowserRouter之外解决:将组件放在BrowserRouter内代码示例: import React,{Component} from 'react' import Header from './common/header' import {CreateGlobalStyle} from './style.js'; import {Icon} from './statics/iconfont/iconfont' import {Bro

react固定菜单栏根据点击菜单栏的选项跳转不同的子界面（路由跳转直接跳新界面，固定不住菜单栏。还有 You should not use ＜Link＞ outside a ＜Router＞）

qq_53768302的博客

09-03

4050

这只能用路由跳，不想用路由还有一个办法，那就是把菜单栏复制到各个界面，这样不管到哪个界面都有菜单栏。。。哈哈哈开个玩笑，进入正题这几天真的被路由给搞吐了，认认真真的改了一天多，今天来到公司之后，我又重新梳理了一下，可能就是昨天脑子确实转不动了，今天就顺着就给搞出来了，那激动的心，颤抖的手，赶紧过来记录一下。主要是怕我以后再忘了。。这次真的进入正题语言：react+ant design 编译器：VS code 环境：macOS Big Sur 这次主要涉及三个界面，看结...

You should not use Route component and Route render in the same route

qq_44096635的博客

06-05

1093

//You should not use <Route component> and <Route render> in the same route; //<Route render> will be ignored //这句话是不用在路由中再嵌套路由 //错误写法 <Route {...props} render={(item) => { if (item.isLogin) {

You should not use Link outside a Router

落枫秋歌

10-28

7537

Promblem React项目中适应`react-router-dom`组件时提示 You should not use <Link> outside a <Router> Reason React-route v4 版本后，不允许在`Router`外部使用`Link`；需要这样使用 <div className="routeMap"> <B...

react的报错 You should not use ‘Link’ outside a ‘Router’

Zhooson的博客

11-15

7268

环境： “react”: “^16.4.0”, “react-dom”: “^16.4.0”, “react-redux”: “^5.0.7”, “react-router”: “^4.3.1”, “react-router-dom”: “^4.3.1” 我在Header组件中写了一个Link跳转路由，一直报错误 You should not use &lt;Link&gt; outside...

React 构建单页应用fix bug You should not use Link outside a Router

etemal_bright的博客

08-23

6739

记录使用react-router-dom的坑一直用vue的路由思想实现单页路由的跳转，但是尚未成功还提示我You should not use &lt;Link&gt; outside a &lt;Router&gt; 误以为 &lt;HashRouter&gt;相当于vue的&lt;router-view&gt; 在网上也没有找到具体的资料但是我猜想是因为我把foo

react后台管理系统---0922

qq_41580536的博客

09-22

230

react后台管理系统—0922 ① 报错：Error: Invariant failed: You should not use outside a 原因：在Router外使用NavLink标签解决：给根组件套上BrowserRouter外标签 ② 报错：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you

从 Prompt 来看微前端路由劫持原理

程序员成长指北

08-15

367

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群问题前两天，业务方给我抛来一段代码，略去繁杂的逻辑，简化后的代码如下：//代码示例1 import{Prompt,...

tiny-invariant.esm.js:12 Uncaught Error: Invariant failed: You should not use <Link> outside a <Router> at invariant (tiny-invariant.esm.js:12:1) at eval (react-router-dom.js:183:1) at updateContextConsumer (react-dom.development.js:18304:1)