ImportError: ‘useNavigate’ не экспортируется из ‘react-router-dom’

#javascript #reactjs #react-router

#javascript #reactjs #react-router

Вопрос:

При попытке импорта useNavigate из react-router-dom я получаю следующую ошибку:

 Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
  

Мой оператор импорта:

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

Комментарии:

1. какой документ вы имеете в виду? react router dom или react router dom github . Ни один из них не имеет useNavigate . Чего вы пытаетесь достичь?

2. @SagarMore я пытаюсь перейти к следующему экрану

3. документация @SagarMore:« В версии 6 это приложение следует переписать, чтобы использовать navigate API. В большинстве случаев это означает изменение useHistory на useNavigate и изменение history.push или history.replace callsite. // Это импорт приложения React Router v6 { useNavigate} из ‘react-router-dom’; функция App() { пусть navigate = useNavigate(); функция handleClick() { navigate(‘/home’) } возврат ( <div> <кнопка onClick={handleClick}>перейтиглавная страница </button> </ div> ); }«

4. я думаю, тогда вам, возможно, придется проверить, правильно ли вы установили / используете правильную версию react-router-dom. Вы установили с помощью этого? npm install react-router-dom@next

Ответ №1:

Вы пытаетесь использовать новейшие функции react-router .
Пожалуйста, убедитесь, что вы установили react-router-dom@6.0.0-alpha.2 .

Это React Router v6, который дает вам перехват useNavigate

Пожалуйста, обратитесь сюда для дальнейшего чтения от команды React Router

Два быстрых способа проверить версию:

  • Проверьте из package.json файла
  • Запустите npm list --depth=0 , чтобы просмотреть различные пакеты в вашем проекте

Ответ №2:

Если вы используете react router v5, вы можете использовать useHistory.

 import { useHistory } from "react-router-dom";
  

использовать:

 history.push('/your-component')
  

Ответ №3:

Я столкнулся с такой проблемой: «useNavigate не экспортируется из ‘react-router-dom«

Мое решение — я удалил react-router-dom и переустановил его … теперь эта проблема решена для меня..