Ошибка при использовании useNavigate() в TypeScript-компоненте внутри React Router

Оффтоп javascript
1

Ребята, у меня возникла проблема при обновлении react-router до версии 7.3.0. Вылезла ошибка про то, что useNavigate() можно использовать только внутри компонента .

Если откатиться на 6.29.0, все работает. Или если переписать дочерний компонент с TypeScript на JavaScript - тоже норм (хотя потом вылезают другие ошибки).

Вот простой пример:

const Маршруты = () => {
  return (
    <БраузерМаршрутизатор>
      <ТестовыйКомпонент />
    </БраузерМаршрутизатор>
  )
}

const ТестовыйКомпонент: ФункциональныйКомпонент<пусто> = () => {
  const навигация = использоватьНавигацию()
  return <></>
}

Использую TypeScript 5.8.2 и webpack 5.98.0. Может есть какая-то хитрая настройка TypeScript, чтобы это пофиксить? Буду благодарен за любую помощь!

2

А может проблема в том, что ты импортируешь useNavigate не из того места? Попробуй импортировать его явно из ‘react-router-dom’, типа так:

import { useNavigate } from ‘react-router-dom’;

И еще, проверь, что у тебя версии react и react-dom совместимы с новой версией react-router. Иногда такие конфликты бывают из-за несовместимости версий. Обнови все пакеты до последних версий, может поможет.

3

хм, а ты пробовал обернуть свой ТестовыйКомпонент в компонент высшего порядка withRouter? это может решить проблему с типами. вот пример:

import { withRouter } from 'react-router-dom';

const ТестовыйКомпонент = withRouter(({ history }) => {
  // используй history вместо useNavigate
  return <></>;
});

если не поможет, проверь еще версии зависимостей в package.json. иногда конфликты возникают из-за несовместимости версий react и react-router. обнови все до последних стабильных версий, это часто помогает решить такие проблемы с типами.

4

Столкнулся с похожей проблемой недавно. Дело в том, что в 7.x версии react-router типы для хуков изменились. Попробуй обернуть свой ТестовыйКомпонент в withRouter HOC:

import { withRouter } from 'react-router-dom';

const ТестовыйКомпонент: React.FC = withRouter(({ history }) => {
  // Теперь используй history вместо useNavigate
  return <></>;
});

Это должно решить проблему с типами. Если нет - проверь, что @types/react-router-dom тоже обновлен до последней версии. Удачи!