React Router v5→v6,v7での変更点#2 useHistoryとuseNavigate

Reactの動画教材の中でReact Router v5が使われていた関係で現行のReact Router v7(v6)では動かない箇所がいくつか存在しました。

前回の記事ではルーティングの際に全体を囲む記法の違いについて書きました。

今回の記事は、JavaScript側でページ遷移させる方法であるv5の<useHistory>とv6以降の<useNavigate>について書いていこうと思います。

【v5】useHistory

React Router v5では<Links to="(パス名)">を用いないページ遷移の方法としてuseHistoryが使われていました。

Page1.jsx

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

export const Page1 = () => {
  const history = useHistory();

  const onClickDetailA = () => history.push("page1/detail/");

  return (
    <>
      <div>
        <h1>Page1</h1>
        <button onClick={onClickDetailA}>Push</button>
      </div>
    </>
  );
};

遷移したいリンク先をhistory.pushで定義してあげることでページ遷移のリンクを設定する仕組みでした。

ですが、React v6以降ではuseHistoryは使えなくなってしまったため、代わりにuseNavigateを使う形となります。

Page1.jsx

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

export const Page1 = () => {
const navigate = useNavigate();

 return (
      <div>
        <h2>Page1ページです</h2>
        <br />
        <button
          onClick={() => {navigate("/page1/detailA");}}> DetailA
        </button>
      </div>
  );
};

useNavigateではhistory.pushの代わりにイベントの処理として{navigate("(遷移先)");}といった記法となります。
アロー関数を使う場合は処理式の部分にnavigateの記述を書くようにします。

個人的にはhistory.pushよりも直感的で使いやすいと感じました。

結論

React Router v6以降ではLink toを使わないタイプの遷移を行う方法としてnavigateを使うようにしましょう