错误：不变量失败：您不应该在 <Router> 之外使用 <Link> 进行反应

Posted 2023-02-22

【中文标题】错误：不变量失败：您不应该在 <Router> 之外使用 <Link> 进行反应

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

【发布时间】：2021-06-19 13:01:06

【问题描述】：

在测试 react 组件时，我不断收到此错误：Invariant failed: You should not use outside a .我添加了这个 - 从“react-router-dom”导入 Route, Switch；但它没有帮助。

要测试的组件（英雄部分）：

import React from 'react';
import './HeroSection.css';
import Searchbox from './search/Searchbox'

function HeroSection() 
  return (
    <div className='hero-container'>
      <img src='/images/Home/hero.jpg'/>
      <h1>Title 1</h1>
        <Searchbox />
    </div>
  );


export default HeroSection;

HeroSection.test.js ：

import * as React from "react";
import * as ReactDOM from "react-dom"

import HeroSection from './HeroSection'

test('testing', () => 
    const root = document.createElement("div");
    ReactDOM.render(<HeroSection />, root);
    expect(root.querySelector("h1").textContent).toBe("Title 1");
)

任何解决问题的建议都会非常有帮助！

【问题讨论】：

Searchbox 使用 Link 吗？

【参考方案1】：

出现此问题是因为从 'react-router 导入的组件应使用路由器提供程序进行包装。详情可以参考这里https://testing-library.com/docs/example-react-router/