Как я могу удалить элементы из объекта, который возвращается из ловушки React с использованием Typescript?

Question

У меня есть компонент, которому нужно подключиться к параметрам запроса React Router, и я использую хук-пакет use-react-router для доступа к ним.

Вот что я хочу сделать:

import React from "react;
import useReactRouter from "use-react-router";


const Foo = () => {
  const { id } = useReactRouter().match.params;

  return (
    <Bar id={id}/>
  )
}

Проблема в том, что это приводит к следующей ошибке в VS Code и во время компиляции: Property 'id' does not exist on type '{}'.ts(2339)

Я обнаружил, что если я реорганизую свой код следующим образом: const id = match.params["id"], я не получаю ошибку, но я чувствую, что это не правильный подход по какой-то причине. Если бы кто-то мог указать мне правильное направление, я был бы признателен.

Answer 1

Код недостаточен. Однако, на первый взгляд,

//  right way
const { history, location, match } = useReactRouter()

//  in your case
const { match: { params : { id } } } = useReactRouter()

// or
const { match } = useReactRouter()
const { id } = match.params

Теперь попробуйте сначала сохранить значение. Также попробуйте передать реквизиты функциональному компоненту из его контейнера, так как это более логично.

Из вашего комментария ниже, я могу только предположить, что вы решили это. Кроме того, рекомендуется использовать возможные неопределенные значения при его использовании.

{ id && id }

Однако, первый шаг должен был утешить, имеет ли это значение,

console.log('value xyz', useReactRouter())

Answer 2

Я понял это. Решением было включение угловых скобок между именем крючка и круглыми скобками, например:

const { match } = useRouter<{ id: string }>();
const { id } = useRouter<{ id: string }>();

Или, если вы предпочитаете вложенную деструктуризацию:

const { match: { params: id } } = useRouter<{ id: string }>();

Answer 3

Вы можете попытаться присвоить значение по умолчанию params

const { id } = useReactRouter().match.params || {id: ""};

Возможно, что params будет нулевым на начальном уровне