Есть ли способ обойти эту условную ловушку?

Question

Я использую Next JS s useRouter для доступа к маршрутизатору следующим образом:

const router = useRouter();

, но, тем не менее, когда мой компонент отображается, я обычно замечаю, что router может быть null, пока не будет создан экземпляр. Моим обходным путем было бы что-то вроде этого:

const router = useRouter();

if (!router) return null;

return (
  // ... jsx
);

Однако у меня есть собственный крючок, который я использую, и он зависит от запросов маршрутизатора:

const router = useRouter();

if (!router) return null;

const {data} = useCustomHook(router.query.id);

return ( //.... )

Но я получаю ошибка eslint, например:

React Hook "useCustomHook" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

Мой обходной путь - создать два отдельных компонента для обработки этого условия:

const HookComponent = ({ id }) => {
  const { data } = useCustomHook(id);
  return ( // ....)
}

const HookComponentWrapper = () => {
  const router = useRouter();
  if (!router) return null;

  return <HookComponent id={router.query.id}/>
}

Мой вопрос: можно ли избежать добавления этого оболочка только для условного?

Answer 1

Поскольку router иногда может быть нулевым, вы можете использовать защитные предложения для доступа до идентификатора, переданного ловушке. useCustomHook по-прежнему необходимо корректно обрабатывать нулевой ввод.

const {data} = useCustomHook(router && router.query && router.query.id);

Или используйте опциональную цепочку , если ваша сборка это позволяет

const {data} = useCustomHook(router?.query?.id);

На этом этапе я бы Предлагаем просто передать объект router и обработать извлечение из него того, что вам нужно, любым настраиваемым хуком.