React Route 组件上的类型错误答案

【问题标题】：Type error on React Route componentReact Route 组件上的类型错误
【发布时间】：2018-06-28 05:45:48
【问题描述】：

我正在尝试使用路由 Route 组件，但它抛出以下错误：

[ts] 类型 '{ path: "/:shortname";组件：第一组件的类型； }' 不能分配给类型'IntrinsicAttributes & IntrinsicClassAttributes & Readonly 并...'。

这是我的路线配置：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

<Router>
    <Link to='/customer'></Link>
    <Route path='/:shortname' component={FirstComponent} />
</Router>

这些是我正在使用的版本：

"@types/react-router-dom": "^4.0.5"
"react-router-dom": "^4.1.1"

【问题讨论】：

您的代码看起来不错，我也在使用 typescript，但我没有收到此错误。
您能上传您的FirstComponent 组件的代码吗？很明显错误是 react-router 和那个组件之间的接口，所以我们可能需要查看那个代码来确定真正的根本原因。

标签： reactjs typescript react-router

【解决方案1】：

好的，问题是<Router/> 元素只接受single 子元素。而Router的孩子是Link & Route的数组。

尝试使用 div 甚至更高级的 React.Fragment 包装您的链接和路由（在反应 16.2+ 之后）

<Router>
  <React.Fragment>
    <Link to='/customer'></Link>
    <Route path='/:shortname' component={FirstComponent} />
  </React.Fragment>
</Router>

【讨论】：