Как заставить useRouteMatch работать с типами изact-router

Question

Я получаю совпадение с моего маршрута, используя такой хук

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

, а затем хочу передать его дочернему компоненту. Но когда я передаю его, я получаю эту ошибку

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

В моем дочернем компоненте я делаю это

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 возвращает ноль, если путь, который у вас есть при условии не совпадает. Когда вы передаете его дочернему компоненту, вы уверены, что это правильное совпадение, но TS не уверен, так как не было проверки для проверки значений Falsey перед тем, как выполнить его поиск.

Возвращается тип match, а не RouteComponentProps. match - это обобщенный c, который по умолчанию является пустым объектом, и именно здесь ожидаемые параметры будут go. Чтобы сообщить 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 ;