如何使useRouteMatch与React-Router中的类型一起使用

Kira 发表于 Dev

基拉

我正在使用这样的钩子从路线中获得比赛

const match = useRouteMatch('/chat/:id');

然后我想将其传递给子组件。但是当我将其传递给我时，我得到了这个错误

Type 'match<{}> | null' is not assignable to type 'match<MatchParams>'.

在m子组件中，我正在这样做

import { RouteComponentProps } from 'react-router';

interface MatchParams {
  id: string;
}

interface ChildProps extends RouteComponentProps<MatchParams> {}

const Child = ({ match }: ChildProps ): React.ReactElement => {
  return (
    <>
      <div>{match}</div>
    </>
  );
};

export default Child ;

有人可以帮我弄清楚如何正确键入所有内容吗？

苏珊斯-

如果查看useRouteMatchhook的返回值，则可以是以下两种类型之一

match<{}> | null。

useRouteMatch如果您提供的路径不匹配，则返回null。当您将其传递给子组件时，您可以确定它是正确的匹配项，但TS不确定，因为在传递给它之前没有检查过假值的检查。

返回类型为，match而不是RouteComponentProps。match是一个泛型，默认情况下为空对象，这是您希望输入的参数的位置。要使TS知道，您必须将其传递。

这就是您必须输入的方式。

Parent.tsx

export interface MatchParams {
  id: string;
}

const match = useRouteMatch<MatchParams>('/chat/:id');

return <Child match={match} />

Child.tsx

import { match } from 'react-router';
import { MatchParams } from './Parent';

interface ChildProps {
  match: match<MatchParams> | null
}

const Child = ({ match }: ChildProps ): React.ReactElement => {
  return (
    <>
      <div>{match}</div>
    </>
  );
};

export default Child ;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。