不变式失败：您不应该在 <Router> 之外使用 <Link>

Posted 2023-02-22

【中文标题】不变式失败：您不应该在 <Router> 之外使用 <Link>

【英文标题】：Invariant failed: You should not use <Link> outside a <Router>

【发布时间】：2020-08-04 11:28:28

【问题描述】：

我的测试出错了：

不变式失败：您不应在 <Router> 之外使用 <Link>

对此我能做些什么？

      483 |     state,
      484 |   ) =>  
    > 485 |     const component = mount(<Testrun  ...props />);
          |                       ^
      486 |     return component;
      487 |   ;
      488 |   it('should have an input for the username', function () 

【参考方案1】：

必须有一个组件应用在组件之外。因此，您收到以下错误： 不变量失败：您不应该在 . 之外使用。

在组件内部移动组件。

【参考方案2】：

在实际项目中，您的 <Testrun> 嵌套在某个父级中，并且该父级也被某些父级包裹，其中一些父级还具有 <BrowserRouter> 或 <HashRouter>。 它们提供了<Link> 所需的上下文（我指的是 React 的 Context API）。

因此，您需要在测试中使用一些路由器版本。就像

一样简单

const component = mount(<MemoryRouter><Testrun  ...props /></MemoryRouter>);

您可以使用任何其他路由器，但 MemoryRouter 在测试中特别有用，因为它易于配置和控制。

【参考方案3】：

你必须在 Router 的子节点中创建 Link 标签