Использование машинописи с useRoute на реагирующей навигации v5

Question

Я пытаюсь извлечь параметры следующим образом, используя useRoute следующим образом.

  const route = useRoute();
  const { params } = route;
  const {
   id, name,
  } = params;

Все работает нормально, но линтер выделяет id и name со следующей ошибкой.

Свойство 'id' не существует для объекта типа '| undefined

Как мне решить эту проблему.

Answer 1

react-navigation экспортирует пару типов утилит, чтобы упростить вашу жизнь при использовании хуков и определения реквизита для ваших собственных компонентов. Они зависят от того, как вы сначала определяете типы для своих навигаторов.

---

Допустим, у вас есть стек с двумя экранами, A и B. Сначала определите, какие параметры принимает каждый из этих параметров:

type StackParamsList = {
  A: undefined;
  B: {
    id: string;
    name: string;
  };
}

Для ввода useRoute на экране B:

import { RouteProp } from '@react-navigation/native';

const route = useRoute<RouteProp<StackParamsList, 'B'>>();

route.params.id // OK
route.params.foo // error

Проверьте статью Проверка типов с помощью Typescript в документах реагирования на навигацию для получения более подробной информации и примеров ввода других элементов вашего стек навигации.

Answer 2

Вы должны использовать параметр типа, предоставляемый useRoute.

type ScreenRouteProps = {
  id: string;
  name: string;
}

const route = useRoute<ScreenRouteProps>();

Более подробную информацию об этом можно найти в документации .