在进行快照测试之前,我有一个组件工作正常。它说“你不应该在路由器之外使用链接”。然后我用路由器包裹了组件,但它不起作用。这是组件:
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-router-dom 的@types,所以这不是问题。我还尝试环绕组件。
另外完整的错误是:
没有与此调用匹配的过载。 重载 1 of 2,'(props: RouterProps | Readonly): Router',出现以下错误。 类型 '{ children: Element[]; 中缺少属性 'history'; }' 但在类型'Readonly' 中是必需的。 重载 2 of 2,'(props: RouterProps, context: any): Router',出现以下错误。 类型 '{ children: Element[]; 中缺少属性 'history'; }' 但在类型 'Readonly'.ts(2769) 中需要 index.d.ts(99, 5):此处声明“历史”。 index.d.ts(99, 5):此处声明“历史”。
最佳答案
路由器名称是 BrowserRouter 只需按如下方式更改导入即可。
import { Link, BrowserRouter as Router } from "react-router-dom";
关于javascript - 使用路由器 "No overload matches this call"包装组件时出现 React-Router + Typescript 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66188545/