javascript - React Router DOM 的 Router 不能正确接受历史

Question

我一直在尝试创建一个实用函数来包装 React 测试库的 render使用 Router 的函数包装整个 React 元素。代码看起来像这样。

import { ReactElement } from 'react';
import { render as renderRTL } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory, History } from 'history';

export function render(ui: ReactElement) {
  const history = createMemoryHistory();
  return {
    history,
    ...renderRTL(<Router history={history}>{ui}</Router>),
  };
}

这里的问题是我不断收到来自 TypeScript 的错误消息，说 History<State> is not assignable to History<unknown>在这行代码上。

...renderRTL(<Router history={history}>{ui}</Router>),

这是完整的错误信息。

No overload matches this call.
  Overload 1 of 2, '(props: RouterProps | Readonly<RouterProps>): Router', gave the following error.
    Type 'History<State>' is missing the following properties from type 'History<unknown>': length, goBack, goForward
  Overload 2 of 2, '(props: RouterProps, context: any): Router', gave the following error.
    Type 'History<State>' is not assignable to type 'History<unknown>'.ts(2769)
index.d.ts(105, 5): The expected type comes from property 'history' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Router> & Readonly<RouterProps> & Readonly<{ children?: ReactNode; }>'
index.d.ts(105, 5): The expected type comes from property 'history' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Router> & Readonly<RouterProps> & Readonly<{ children?: ReactNode; }>'

这是我的 package.json

{
  "name": "TITLE",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.21",
    "@types/node": "^12.20.6",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.3",
    "web-vitals": "^1.1.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "@types/history": "^4.7.8",
    "@types/react-router": "^5.1.12",
    "@types/react-router-dom": "^5.1.7",
    "autoprefixer": "9",
    "history": "^5.0.0",
    "husky": "^5.2.0",
    "lint-staged": "^10.5.4",
    "postcss": "7",
    "prettier": "^2.2.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "lint": "eslint --ext .ts,.tsx src",
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css}": [
      "npm run format"
    ]
  }
}

问题应该是缺少 length , goBack , 和 goForward来自内存历史的属性。
是 react-router 的错误吗？本身？

Answer 1

我不小心安装了history作为开发依赖项，这导致类型不兼容。为了解决这个问题，我删除了 history并重新安装react-router-dom以确保它已正确安装。以下是使用 pnpm 的方法

pnpm remove history
pnpm add react-router-dom