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

【问题标题】：How to make useRouteMatch work with types from react-router如何使 useRouteMatch 与 react-router 中的类型一起使用
【发布时间】：2020-08-07 02:41:26
【问题描述】：

我正在使用这样的钩子从我的路线中获取匹配项

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 ;

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

【问题讨论】：

match 的类型是什么？

标签： reactjs typescript react-router

【解决方案1】：

如果你看useRouteMatch钩子的返回值，它可以是任何一个类型

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 ;

【讨论】：

【解决方案2】：

我相信useRouteMatch 钩子的全部意义在于避免将match 作为道具传递。

如果您想获取match 或其内部属性之一（如参数），您可以直接在您的孩子中使用此钩子。

interface MatchParams {
  id: string;
}

const Child = (): React.ReactElement => {
  const match = useRouteMatch<MatchParams>();

  return (
    <>
      <div>{match}</div>
      <div>{match.params.id}</div>
    </>
  );
};

【讨论】：