Javascript React路由器&x2B；使用路由器包装组件时出现Typescript错误；没有与此调用匹配的重载“；

在进行快照测试之前，我有一个工作正常的组件。它说“你不应该使用路由器外的链接”。然后我用路由器包装了这个组件，但它不工作。以下是组件：

import React from "react";
import "./Body.css";
import { Link, Router } from "react-router-dom";
const Body: React.FC = () => {
  return (
    <div className="body">
      <Router>
        <Link to="/movies">
          <div className=" body__item">
            <p>MOVIES</p>
          </div>
        </Link>
        <Link to="/series">
          <div className=" body__item">
            <p>SERIES </p>
            <img src="../../../images/placeholder.png" alt="" />
          </div>
        </Link>
      </Router>
    </div>
  );
};

export default Body;

从“React”导入React；
导入“/Body.css”；
从“react Router dom”导入{Link，Router}；
常量正文：React.FC=（）=>{
返回(
电影

系列

);
};
导出默认体；

我有@types用于响应路由器dom，所以这不是问题所在。我还试着环绕组件

此外，完全错误是：

没有与此调用匹配的重载。 重载2中的第1个“（道具：RouterProps | Readonly）：Router”给出了以下错误。 类型“{children:Element[]；}”中缺少属性“history”，但类型“Readonly”中需要属性“history”。 重载2/2'（props:RouterProps，context:any）：Router'给出了以下错误。 类型“{children:Element[]；}”中缺少属性“history”，但类型“Readonly”中需要属性“history”。ts（2769） 索引d.ts（99，5）：“历史”在此声明。

---

index.d.ts（99，5）：“历史记录”在这里声明。

路由器名称为BrowserRouter只需按以下方式更改导入即可

import { Link, BrowserRouter as Router } from "react-router-dom";

---

路由器名为BrowserRouter，只需按如下方式更改导入即可

import { Link, BrowserRouter as Router } from "react-router-dom";

---

我从另一个问题中发现了这一点，我忘了添加测试代码，也没有提到我也在使用Jest进行测试。这是解决方案代码：

import { render } from "@testing-library/react";
import NotFoundPage from "../Components/NotFoundPage/NotFoundPage";
import { BrowserRouter } from "react-router-dom";

const { container } = render(
  <BrowserRouter>
    <NotFoundPage />
  </BrowserRouter> 
// I was just rendering without wrapping it like this. so you should 
// wrap your component like this while testing
);

// SnapShot Test
it("Not found page matches snapshot", () => {
  expect(container).toMatchSnapshot();
});

从“@testing library/react”导入{render}”；
从“./Components/NotFoundPage/NotFoundPage”导入NotFoundPage；
从“react router dom”导入{BrowserRouter}；
常量{container}=render(
//我只是渲染，没有像这样包装它。所以你应该
//测试时像这样包装组件
);
//快照测试
它（“未找到与快照匹配的页面”，（）=>{
expect（container.toMatchSnapshot（）；
});

我从另一个问题中找到了答案，我忘了添加测试代码，也没有提到我也在使用Jest进行测试。这是解决方案代码：

import { render } from "@testing-library/react";
import NotFoundPage from "../Components/NotFoundPage/NotFoundPage";
import { BrowserRouter } from "react-router-dom";

const { container } = render(
  <BrowserRouter>
    <NotFoundPage />
  </BrowserRouter> 
// I was just rendering without wrapping it like this. so you should 
// wrap your component like this while testing
);

// SnapShot Test
it("Not found page matches snapshot", () => {
  expect(container).toMatchSnapshot();
});

从“@testing library/react”导入{render}”；
从“./Components/NotFoundPage/NotFoundPage”导入NotFoundPage；
从“react router dom”导入{BrowserRouter}；
常量{container}=render(
//我只是渲染，没有像这样包装它。所以你应该
//测试时像这样包装组件
);
//快照测试
它（“未找到与快照匹配的页面”，（）=>{
expect（container.toMatchSnapshot（）；
});

在路由器中有链接而没有路由是没有意义的。你不是已经有一个路由器在某处包装了一些

路由
组件吗？@azium当然有，我不需要提及它。正如我所说的，这在没有包装的情况下运行良好。您可能需要在测试中包装路由器。在没有路由的情况下，在路由器中有链接是没有意义的。你不是已经有一个路由器在某处包装了一些
路由
组件吗？@azium当然有，我不需要提及它。正如我所说的，这在没有包装的情况下运行良好。你可能需要在测试中包装路由器。我尝试了这个，但不起作用。我只是在这个Sandbox上得到了相同的错误，并按照我告诉你的修复了它。看看这里：我试过这个，但不起作用。我只是在这个Sandbox上得到了相同的错误，并按照我告诉你的修复了它。请看这里：