#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 и переустановил его … теперь эта проблема решена для меня..