使用路由器包装组件时 React-Router + Typescript 错误“没有重载匹配此调用”

Question

在我进行快照测试之前，我有一个运行良好的组件。它说“您不应该在路由器之外使用 Link”。然后我用路由器包装了组件，但它不起作用。这是组件：

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;

I have @types for react-router-dom so it's not the problem. I also tried wrapping around the component.

Also the full error is:

No overload matches this call. Overload 1 of 2, '(props: RouterProps | Readonly): Router', gave the following error. Property 'history' is missing in type '{ children: Element[]; }' but required in type 'Readonly'. Overload 2 of 2, '(props: RouterProps, context: any): Router', gave the following error. Property 'history' is missing in type '{ children: Element[]; }' but required in type 'Readonly'.ts(2769) index.d.ts(99, 5): 'history' is declared here. index.d.ts(99, 5): 'history' is declared here.

Answer 1

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

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