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，所以这不是问题。 我还尝试包裹组件。

完整的错误也是：

没有重载匹配此调用。 Overload 1 of 2, '(props: RouterProps | Readonly): Router'，给出了以下错误。 类型'{ children: Element[]; 中缺少属性'history'； }' 但在“只读”类型中是必需的。 Overload 2 of 2, '(props: RouterProps, context: any): Router'，给出了以下错误。 类型'{ children: Element[]; 中缺少属性'history'； }' 但在类型 'Readonly'.ts(2769) index.d.ts(99, 5) 中是必需的：这里声明了'history'。 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();
});