React报错Router cannot be used as a jsx component排查

基于React开发前端路由功能时，项目运行抛出错误：

Error: Router cannot be used as a jsx component

问题实现代码如下：

<Router>
  <Route exact path="/">
    <Redirect to="/tab" />
  </Route>
  {loading ? (
    <Loader style={{ margin: 100 }} />
  ) : (
    <>
      <Route exact path="/privacy" component={Privacy} />
      <Route exact path="/termsofuse" component={TermsOfUse} />
      <Route exact path="/tab" component={Tab} />
      <Route exact path="/config" component={TabConfig} />
    </>
  )}
</Router>

项目依赖配置如下：

{
  "dependencies": {
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^5.0.0"
  },
  "devDependencies": {
    "@types/node": "^12.0.0",
    "@types/react": "^16.14.6",
    "@types/react-dom": "^16.9.12",
    "@types/react-router-dom": "^5.1.7",
    "cross-env": "^7.0.3",
    "env-cmd": "^10.1.0",
    "typescript": "^4.1.2"
  },
  "resolutions": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2"
  }
}

• 所用react-router-dom@5.1.2版本中，Router属于底层基础组件，不支持直接作为业务代码的路由外壳使用：该组件要求必须传入history实例作为必填属性，缺失该属性时就会抛出"cannot be used as a jsx component"类型的错误。
• 常规业务开发使用的路由外壳是官方基于Router封装的开箱即用组件，分别为BrowserRouter（对应History路由模式）、HashRouter（对应Hash路由模式），二者内部已经自动完成history实例的创建与注入，无需手动传参。

1. 调整组件导入逻辑
   将文件头部导入的Router替换为业务场景匹配的封装组件，以最常用的History模式为例：

// 错误导入
// import { Router, Route, Redirect } from 'react-router-dom'
// 正确导入
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'

如果需要使用Hash模式路由，把上述导入中的BrowserRouter替换为HashRouter即可，原有JSX路由结构不需要做任何改动即可正常运行。

2. 特殊场景适配
   如果存在非组件内调用路由跳转的需求，必须自定义history实例时，才需要使用底层Router组件，此时需要手动传入创建好的history实例：

// 自定义history场景写法
import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history'
const customHistory = createBrowserHistory()

// 使用时传入必填的history属性
<Router history={customHistory}>
  {/* 原有路由配置 */}
</Router>

内容的提问来源于stack exchange，提问作者Vanya Srivastava