라우터 DOM의 라우터가 기록을 올바르게 수신하지 않음

라우터 DOM의 라우터가 기록을 올바르게 수신하지 않음

리액션 테스트 라이브러리의 기능을 래핑하는 유틸리티 기능을 만들려고 시도했었습니다.render사용하는 함수Router전체 반응 요소를 포장하십시오.코드는 이렇게 생겼어.

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; }>'

그리고 이건 내 소포야.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그 자체가?

실수로 설치함history유형이 호환되지 않도록 하는 dev-properties.이 문제를 해결하려면 다음을 제거하십시오.history그리고 다시 설치react-router-dom제대로 설치되었는지 확인하기 위해서입니다.사용 방법pnpm

pnpm remove history
pnpm add react-router-dom

참조URL: https://stackoverflow.com/questions/66787564/react-router-doms-router-doesnt-accept-history-correctly