如何使 useRouteMatch 与来自 react-router 的类型一起使用

Question

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

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

如果你看useRouteMatchhook的返回值，它可以是任何一种类型

match<{}> | null.

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

返回是 typematch而不是RouteComponentProps。 match是一个泛型，默认情况下是空对象，这是您期望的参数将进入的位置。要让 TS 意识到您必须将其传入。

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

父.tsx

export interface MatchParams {
  id: string;
}

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

return <Child match={match} />

儿童.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 ;