useHistoryが使えない

はじめに

useHistoryを使って画面遷移を実装すると下記エラーに遭遇した。

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=3b2daf99' does not provide an export named 'useHistory'

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

export const Page1 = () => {
  const arr = [...Array(100).keys()];

  const history = useHistory();

  const onClickDetailA = () => {
    return history.push("/page1/DetailA");
  };

  return (
    <div>
      <button onClick={onClickDetailA}>DetailA</button>
    </div>
  );
};

useHistoryがないよ〜とのこと。

環境

• react: ^19.2.6
• react-dom: ^19.2.6
• react-router-dom": ^7.16.0

原因

どうやらuseHistoryはv5まで、v6からはuseNavigateになったようです！

解決

以下のように変更したら無事に解決

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

export const Page1 = () => {
  const arr = [...Array(100).keys()];
  console.log(arr);

  const navigation = useNavigate();

  const onClickDetailA = () => {
    return navigation("/page1/DetailA");
  };

  return (
    <div>
      <h1>Page1ページ</h1>
      <Link to={{ pathname: "/page1/DetailA" }} state={arr}>
        DetailA
      </Link>
      <Link to="/Page1/DetailB">DetailB</Link>
      <br />
      <button onClick={onClickDetailA}>DetailA</button>
    </div>
  );
};

終わりに

バージョンでいろいろ変わるものも多いから確認必要ですね。

参考