属性'match'在类型'{children ?: ReactNode;上不存在。 }'

时间:2020-10-24 15:53:26

标签: typescript react-router

我很茫然。我对Typescript还是很陌生,我确实尝试了在其他线程上找到的几种建议的解决方案,例如导入RoutePropsRouteComponentProps并将其应用于React.FC<RouteProps>,但是{{1} },matchparams仍然不存在。

我尝试创建一些接口,但是我不确定如何键入对象{}。因为idmatch是对象,而params是字符串。.

下面是我正在使用的代码。任何输入将不胜感激。

id

1 个答案:

答案 0 :(得分:1)

当您将react-router道具RouteComponentProps添加到组件道具时,它知道您的道具包含属性match,其属性为params,该属性为{{1} }。还不知道object中存在哪些属性。

考虑一下,参数名称取决于您在路由匹配字符串中的位置,因此,参数名称是特定于路由器实现的。

类型params带有一个generic类型参数RouteComponentProps<Params>,它允许您指定匹配参数是什么。您可以内联或通过为道具定义接口来完成此操作:

Params

const Cocktail: React.FC<RouteComponentProps<{id: string}>> = (props) => {

现在,当您尝试访问interface MyParams { id: string; } const Cocktail: React.FC<RouteComponentProps<MyParams>> = (props) => { 打字稿上的属性时,您的IDE将知道这些属性为props.match.params,而没有其他内容。