“useHistory”がない！react-router-dom v6以降は”useNavigate”を使おう

react-router-dom v6で”useHistory”が削除されて、”useNavigate”に置き換えられたようです。

v6以降では”useNavigate”を使いましょう！

“useHistory”と”useNavigate”についての変更内容と、新しい使い方については下記ページを参照してください。

『Use “useNavigate” instead of “useHistory”』
https://reactrouter.com/en/v6.3.0/upgrading/v5#use-usenavigate-instead-of-usehistory

（参考）useNavigateを使用するコード

一番最小で useNavigate を使うコードです。使い方のイメージの参考にしてください。

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

function App() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => {navigate("/home")}}>ホームに行く</button>
      <button onClick={() => {navigate(-1)}}>1ページ戻る</button>
    </div>
  );
}