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

【问题标题】：Invariant failed: You should not use <Link> outside a <Router>不变式失败：您不应该在 <Router> 之外使用 <Link>
【发布时间】：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 () {

【问题讨论】：

标签： reactjs react-redux jestjs enzyme react-router-dom

【解决方案1】：

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

在组件内部移动组件。

【讨论】：

【解决方案2】：

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

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

一样简单

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

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

【讨论】：

【解决方案3】：

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

【讨论】：