“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>
  );
}

現在、Webサイト改善のために、Google Analyticsによるアクセス分析を勉強しています!

以下のボタンが押された回数を計測中なので、良ければポチっと押していただけると嬉しいです!

\ ポチッと応援ありがとうございます!/

 

みんなにシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次