类型 'BrowserRouter' 缺少以下属性... - TypeScript

Question

我正在学习 TypeScript，并且正在尝试将 TypeScript 添加到我的宠物项目中。在 ReactDOM.render 函数调用中我收到此错误：

No overload matches this call. The last overload gave the following error.

Argument of type 'BrowserRouter' is not assignable to parameter of type 'ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>[]'.

Type 'BrowserRouter' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => Component<any, any, any>)>[]': length, pop, push, concat, and 26 more.

代码如下：

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';

import App from "./App";
import configureStore from './store';

const store = configureStore();

ReactDOM.render(
    <Router>
        <Provider store={store}>
            <App />
        </Provider>
    </Router>, 
    document.getElementById("root")
);

package.json

{
  "name": "WhatToCook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-addons-update": "^15.6.3",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-jss": "^10.5.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

我尝试为我在此文件中使用的所有包安装类型依赖项，但没有帮助。

Answer 1

如果你添加 typescript 并且你的组件或组件测试文件中有 JSX 必须有 .tsx 作为你的文件扩展名。如果您有 .ts 文件扩展名，则代码无法编译。因此，如果这是您的情况，请将其重命名为 .tsx.

降级到 15.04 版本的 React 类型定义也可以工作看到这个线程：Allow SFC to return null

类型 'BrowserRouter' 缺少以下属性... - TypeScript

Type 'BrowserRouter' is missing the following properties... - TypeScript

javascript

typescript

reactjs

react-router

react-dom