React Router DOM 的 Router 不能正确接受历史答案

【问题标题】：React Router DOM's Router doesn't accept history correctlyReact Router DOM 的 Router 不能正确接受历史
【发布时间】：2021-06-21 13:09:44
【问题描述】：

我一直在尝试创建一个实用函数来包装 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 本身的错误吗？

【问题讨论】：

我只是将代码复制并粘贴到一个新的应用程序中，我没有看到任何错误。我会和你的 package.json 一起玩，看看问题是否存在。
谢谢，我的包裹可能有问题。我假设 react-router-dom 和 history 的版本不兼容
你也可以卸载history和react-router，让react-router-dom自行安装正确的版本。
谢谢，它实际上工作正常。看起来我确实不小心将history 安装为开发依赖项，这导致类型不兼容。感谢您帮助我。
太棒了！你应该写一个快速的答案，以防其他人有这个问题。

标签： javascript reactjs typescript react-router react-router-dom

【解决方案1】：

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

pnpm remove history
pnpm add react-router-dom

【讨论】：

请注意，eslint 会大喊：'history' should be listed in the project's dependencies. Run 'npm i -S history' to add it。不幸的是，除了为这条线禁用 eslint 之外，我找不到解决方案。