＆＃x27; router＆＃x27;不能用作JSX组件。其实例类型＆＃x27; browserrouter＆＃x27;不是有效的JSX元素

Question

当NPM构建过程下方运行时，错误' 路由器'不能用作JSX组件。 它的实例类型“ browserrouter”不是有效的JSX元素。 发生。什么原因是什么？

我正在使用节点v14.18.3。 package.json文件如下所示。
我更新了 React-Intl 软件包，但没有得到任何结果，这发生在DevOps Build Server中。

Creating an optimized production build...
  Failed to compile.
  
  D:/a/1/s/ClientApp/src/App.tsx
  TypeScript error in D:/a/1/s/ClientApp/src/App.tsx(20,6):
  'Router' cannot be used as a JSX component.
    Its instance type 'BrowserRouter' is not a valid JSX element.
      The types returned by 'render()' are incompatible between these types.
        Type 'React.ReactNode' is not assignable to type 'import("D:/a/1/s/ClientApp/node_modules/react-intl/node_modules/@types/react/index").ReactNode'.  TS2786
  
      18 | export default function App() {
      19 |   return (
    > 20 |     <Router>
         |      ^
      21 |       <Switch>
      22 |         <Route exact path="/"></Route>
      23 |         <Route path="/StaticTabs/MainTab" component={MainTab}></Route>
  
  
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] build: `react-scripts build`

package.json

{
  "name": "abs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fluentui/react-northstar": "^0.63.0",    
    "@microsoft/teams-js": "^1.11.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/microsoftteams": "^1.9.2", 
    "axios": "^0.21.1",
    "lodash": "^4.17.21",
    "msteams-react-base-component": "^1.1.1",
    "office-ui-fabric-react": "^7.181.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-hook-form": "^7.25.1",
    "react-intl": "^5.24.4",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^4.0.3",
    "react-select": "^5.2.2",
    "read-appsettings-json": "^1.0.98",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/es6-promise": "^3.3.0",
    "@types/jest": "^27.4.0",
    "@types/lodash": "^4.14.182",
    "@types/node": "^16.11.21",
    "@types/react": "^16.8.6",
    "@types/react-dom": "^16.8.12",
    "@types/react-router-dom": "^5.1.7",
    "cross-env": "^7.0.3",
    "env-cmd": "^10.1.0",
    "typescript": "^4.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "@typescript-eslint/no-array-constructor": "off",
      "array-callback-return": "off",
      "no-mixed-operators": "off",
      "no-empty-pattern": "off",
      "jsx-a11y/anchor-is-valid": "off"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

您的React-Router-dom在版本“^5.2.2”时代码>“^5.1.7” 。

您的react-dom版本也有区别。您的react-dom在版本“^16.8.6”时16.8.12“ 。

尝试做：npm i react@16 react-dom@16 react-router-dom@5@types/react@16@types/react-dom@16@types/react-router-dom@5