Блог

Главная - Вопросы по программированию - Почему маршрут не меняется после вызова асинхронной функции в react

Почему маршрут не меняется после вызова асинхронной функции в react

#javascript #reactjs #react-router #react-router-dom #react-router-v4

Вопрос:

У меня есть шаблон кода, который, как я знаю, не сработает, но я не могу его объяснить.

 const MyComponent=()=>{
  const history = useHistory();

  function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
  }
   
  async function onClickHandler(){
    await sleep(2000)
    history.push("/newRoute");
  }
  
  return (
    <button onClick={onClickHandler}>Click Me!!</button>
  )
}

Для кода выше, когда вы нажимаете кнопку, функция должна подождать 2 секунды, а затем перейти на новый маршрут.

Этого не происходит. при нажатии на кнопку ничего не происходит. Я не уверен, что понимаю причину этого. В идеале ожидание должно разрешиться через 2 секунды, и должна быть вызвана история.push. Почему его не вызывают?

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

1. ты пробовал console.log вместо history.push этого ? Просто чтобы доказать, что он не сломан по другим причинам?

2. Пожалуйста, добавьте это: импорт { История использования } из ‘react-router-dom’;

3. Я не заметил никакой ошибки в данном коде. Итак, я примерил его codesandbox.io и он выполняется без каких-либо проблем. Возможно, вы сделали что-то не так при определении случая переключения для маршрутов. Пожалуйста, поделитесь всем своим кодом. URL-адрес Codesandbox

4. Да, я понимаю. Может быть, это ошибка в другом файле. Дай мне взглянуть. Спасибо @priyansh-гахарана

Ответ №1:

ОБНОВЛЕНИЕ: OP здесь: Приведенный выше вопрос не содержит никаких ошибок. В другом файле была ошибка. Пожалуйста, следуйте ответу @priyansh-gaharana в комментарии для URL-адреса codesandbox

Метки: