错误:不变量失败:不应在<Router>外部使用<Link>
这个错误是由于在使用React Router时，将<Link>组件放在了<Router>组件外部导致的。下面是对这个错误的解释和解决方法：
解释： React Router是一个用于构建单页应用的库，它提供了一些组件和API来管理应用的路由。其中，<Router>组件是React Router的核心组件，用于包裹整个应用的路由部分。而<Link>组件是用于创建导航链接的组件，它会生成一个可点击的链接，点击后可以切换到指定的路由。
解决方法：
- 确保在使用<Link>组件之前，已经正确地使用了<Router>组件进行包裹。例如，在应用的根组件中，可以将整个应用的路由部分包裹在<Router>组件中。
- 如果已经正确地使用了<Router>组件进行包裹，但仍然出现这个错误，那么可能是<Link>组件被放在了<Router>组件外部。请检查代码，确保在使用<Link>组件时，它们被包裹在<Router>组件内部。
- 如果你使用的是React Router v6及以上版本，那么<Link>组件已经被重命名为<NavLink>组件。所以，如果你使用的是React Router v6及以上版本，请将<Link>组件替换为<NavLink>组件。
总结： 在使用React Router时，要确保正确地使用<Router>组件进行包裹，并将<Link>组件放在<Router>组件内部。这样可以避免出现"错误:不变量失败:不应在<Router>外部使用<Link>"这个错误。
相关·内容
我想在我的react应用程序中创建一个路由器，它显示了这个错误，我尝试了不使用链接和使用Navlink，但它不起作用。/App.css";import Rute from ".to="/">
<BottomNavigationAction label="acasa" value="a
浏览 22提问于2019-10-07得票数 1
回答已采纳
我正在尝试使用链接组件来启用我的应用程序的客户端渲染。下面是我的组件。/UserIcon';import { Link, BrowserRouter } from 'react-router-dom</Switch> </div>export default App;
现在，当我运行我的
浏览 41提问于2020-06-03得票数 0
回答已采纳
我正在尝试将单元测试添加到我一直在做的一个项目中，使用酶。我已经能够设置一个基本的测试，但是，当我尝试运行它时，我得到了以下错误："Method“text”is meant be run on 1 node. 0 found .“ 我已经浏览了各种在线教程，以及类似问题的答案{' '} className={classes.resetPasswordURL}="/reset-pass
浏览 6提问于2019-10-04得票数 0
它说我在Router之外使用NavLink，但是当你看代码的时候。我只是导入组件(Home)，它实际上位于路由内部。但是，它会抛出一个错误。document.getElementById('root'));import React from 'react';Home.txs
import React from &
浏览 0提问于2019-11-20得票数 1
1回答
到目前为止，我对react-router-dom没有任何问题，让我来解释一下。<Link
to={`/c/contribution/${this.state.selectedPlace.
浏览 0提问于2019-07-27得票数 1
我想为我的Footer组件编写快照测试，但它抛出错误：You should not use <Link> outside a <Router>。.create(<Footer />)}) 我知道这是因为Footer组件使用了react-router-dom中的Link。<BrowserRouter>
浏览 16提问于2019-04-22得票数 1
回答已采纳
no-unused-expressions,prettier/prettierimport { Redirect, Route } from 'react-routerrender( );}); 该组件运行良好，但由于我无法为其构建测试，因此出现以下错误： Invariant failed: You should not use <
浏览 22提问于2020-01-18得票数 0
"Error: Invariant :您不应该在<Router>外部使用<Route>“有很多问题，但这个问题的不同之处在于，只有在使用返回<Route>的库中的组件时才会出现这个问题。我的目的是在公司的其他人可以使用npm安装的私有库中创建一个<GuardedRoute>组件。这个新组件返回一个<Route>，但首先检查谓词的返回值；如果检查失败，<Route>将指向某个替代页面组件。一个简单的用例是检查
浏览 0提问于2020-04-29得票数 2
我在尝试使用reactDomServer和静态路由器进行服务器端渲染时遇到错误。我得到了以下输出：at invariant (webpack/node_modules/react-router/esm/react-router.js?context.url } els
浏览 61提问于2020-06-01得票数 0
我正在使用一个带有标记的Mapbox GL JS地图的React (16) SPA，并且我试图在每个标记弹出窗口中呈现一个Link，这会抛出以下内容：Error: Invariant failed: Youshould not use <Link> outside a <Router>
这让我感到困惑，因为Map组件是App组件的子组件，后者被包装在react-router-dom的BrowserRouter} from 'react-router-do
浏览 82提问于2020-05-21得票数 1
main.js
import {BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom} from 'react-router-dom';impo
浏览 9提问于2020-01-15得票数 0
我正在学习如何使用React，目前正在试用Reactive路由器，我几乎已经尝试过堆叠溢出的所有内容，但不知何故，它不起作用。我不太清楚到底发生了什么。我在跟踪，但它给了我一个您不应该使用路由器错误之外的链接。 return (
<Router>
浏览 2提问于2019-03-17得票数 1
我试图从material中使用BottomNavigationAction浏览不同的屏幕，并得到这个错误You should not use <Link> outside a <Router>。Tab.js：import { Link } from 'react-router-dom';
import { withStyles } from<BottomNavig
浏览 0提问于2018-11-21得票数 0
回答已采纳
我正在编写一个react js页面，其中的呈现html页面具有以下内容 <p></p> 当我运行jest测试时，我得到以下错误您不应该在外部使用 我试着用 从‘react-router-dom’导入{ BrowserRouter，链接，MemoryRouter }； <BrowserRouter>
<
浏览 10提问于2020-10-08得票数 0
“(这意味着“用户创建的”)显示在屏幕上，但是当涉及到render()方法时，这个错误显示为" error : Invariant : You shows not use <Redirect> outsidea <Router>“。我试图将函数"handleOnSubmit“放在返回()之外，但同样的错误也出现了。如果任何人有其他方法来重定向，我将非常感谢。ErrorMessage, Formik, Form, Field } from 'formik';
import * a
浏览 2提问于2021-02-08得票数 0
我正在开发一个应用程序，其中我使用Firebase作为应用程序的身份验证系统，当我尝试实现应用程序的路由时，我开始收到上面的标题错误。 我使用withRouter函数来封装我的应用程序组件。useSelector } from "react-redux"; Route, useHistory, BrowserRouter as Router,
} from "react-router-dom&quo
浏览 37提问于2021-09-12得票数 3
回答已采纳
> <Link to="/new">New Character</Link><Link to="/load">Load Character</Link>
<Route path="/n
浏览 40提问于2019-05-15得票数 0
回答已采纳
1回答
我正在学习一个ReactJS教程，在这个教程中，导师正在使用基于类的组件(而不是那时的钩子)和react路由器-dom，它仍然在使用render和component (不使用'element‘关键字)。所以，我发现了如何降低反应路由器的等级：我不确定这是否是正确的版本，我可以使用渲染/组件而不是元素，另外，我也不确定我是否还需要一个旧版本的创建P.S .我在安装了react router</
浏览 4提问于2022-09-28得票数 -1
回答已采纳
但是，当试图通过storybook查看单个组件时，它会抛出一个错误，就像上面标题上说的那样。App.tsximport { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import { Register } from '.} alt="arrow
浏览 19提问于2019-11-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
