React Router DOM 的 Router 不能正確接受歷史

Question

我一直在嘗試創建一個實用程序 function 來包裝 React 測試庫的render function ，它使用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"
    ]
  }
}

問題應該是 memory 歷史記錄中缺少length 、 goBack和goForward屬性。

這是react-router本身的錯誤嗎？

Answer 1

我不小心將history安裝為開發依賴項，這導致類型不兼容。 為了解決這個問題，我刪除了history並重新安裝react-router-dom以確保它已正確安裝。 這是使用pnpm的方法

pnpm remove history
pnpm add react-router-dom