Как программно перемещаться с помощью реактивного маршрутизатора?

Это краткий рассказ о «реагировании-маршрутизаторе», проблеме, с которой я столкнулся, и найденном решении, поэтому просто хотел поделиться с вами!

Используя react-router, я могу использовать элемент Link и создавать ссылки, которые по умолчанию реагируют, маршрутизатор обрабатывает для них навигацию!

Но что, если у меня нет «Ссылки», а я хочу перейти? Могу ли я вместо этого написать код для навигации?

Решений может быть много, но я думаю, что это хорошее:

Использование хуков в React Router v5.1.0 и выше!

В React Router версии 5.1.0 и выше появился новый хук useHistory (думаю, он есть в React версии 16.8.0 и выше), который делает это за меня!

Как? вот фрагмент кода, который это делает:

import { useHistory } from "react-router-dom";
function HomeButton() {
  const history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Вот и все! легко а!

Если вы изучаете React и работаете с ним, я рекомендую вам эту книгу, чтобы перейти на следующий уровень разработки React:

https://amzn.to/2WSJ1VD

Если вам понравилась эта статья, нажмите 👏 ниже, чтобы другие люди увидели ее здесь, на Medium.

Давайте дружить в Твиттере. Удачного кодирования :)

Радость!