javascript - 使用路由器 "No overload matches this call"包装组件时出现 React-Router + Typescript 错误

Question

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

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):此处声明“历史”。

Answer 1

路由器名称是 BrowserRouter 只需按如下方式更改导入即可。

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