reactjs - 如何使 useRouteMatch 与 react-router 中的类型一起使用

Question

我正在使用这样的钩子(Hook)从我的 route 获得比赛

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 ;

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

Answer 1

如果查看 useRouteMatch 的返回值钩子(Hook)，它可以是任何一种类型match<{}> | null .useRouteMatch如果您提供的路径不匹配，则返回 null。当您将它传递给子组件时，您确定它是正确的匹配项，但 TS 不确定，因为在传递它之前没有检查来测试错误值。
返回类型为 match而不是 RouteComponentProps .match是一个泛型，默认情况下是空对象，这是您期望的参数进入的地方。要让 TS 知道，您必须将其传入。
这就是您必须输入的方式。
父.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 ;