反应路由器 + 打字稿错误，同时用路由器"No overload matches this call"包装组件

Question

在我进行快照测试之前，我有一个工作良好的组件。上面写着"你不应该在路由器之外使用Link"。。然后我用router封装了这个组件，但它不起作用。下面是组件:

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;

我有@types为react-router-dom，所以这不是问题。

完整的错误是:

没有重载匹配此调用。重载1 (2)，'(props: RouterProps | Readonly): Router'，给出如下错误。属性'history'在类型'{children: Element[];}'，但需要在类型'只读'。重载2的2，'(props: RouterProps, context: any): Router'，给出了以下错误:属性'history'在类型'{children: Element[];}'，但在类型'Readonly'中需要。ts(2769)index.d。Ts(99,5):这里宣布了"历史"。index.d。Ts (99,5): 'history'在这里声明。

Answer 1

路由器的名称是BrowserRouter，只要把你的导入修改如下，它就会工作了。

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

Answer 2

我从另一个问题中发现了这一点，我忘记添加测试代码，也没有提到我也在使用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();
});