useNavigate(): React Routerでのナビゲーションとその活用方法

useNavigateは、React Router v6で提供されるフックで、従来のuseHistoryフックを置き換える形で使用される。コード内で条件に応じてページ移動を制御することができる。

このフックを使うことで、さまざまなナビゲーションシナリオに柔軟に対応できる。特定の条件が満たされたときにページを移動させたい場合や、ユーザーがボタンをクリックした際に別のページへ移動させる場合に使う。

基本的な使い方

useNavigateは関数を返す。この関数を呼び出すことで、指定したパスに移動する。

// useNavigateをインポートする
import { useNavigate } from "react-router-dom";
const MyComponent = () => {
  const navigate = useNavigate(); // useNavigateを使う
  return (
    <div>
      <h1>Current Page</h1>
      {/* クリックすると、'/new-path'へ移動する */}
      <button onClick={() => {navigate('/new-path')}}>Go to New Page</button>
    </div>
  );
};
export default MyComponent;

クエリパラメータの渡し方

const handleClick = () => {
	navigate('/search-results?search=query');
};
// ボタンをクリックすると '/search-results?search=query' に移動する
<button onClick={handleClick}>Search</button>

状態の渡し方

複数のページから同じページに移動した際に、どのページから来たのかを判断することができる。

// ホームページから詳細ページへ移動
const navigateFromHome = useNavigate();
navigateFromHome('/details', { state: { from: 'home' } });

// プロフィールページから詳細ページへ移動
const navigateFromProfile = useNavigate();
navigateFromProfile('/details', { state: { from: 'profile' } });

「詳細ページ」では、useLocationフックを使ってstateを取得し、どのページから来たかを判別できる。

import { useLocation } from "react-router-dom";
const DetailsPage = () => {
  const location = useLocation();
  // このページに来る前のページが 'home' か 'profile' かがわかる
  const fromPage = location.state?.from;
};

オプションの使い方

例えば、フォームの送信後に「確認ページ」にリダイレクトする場合、ユーザーが「戻る」ボタンを押すとフォームページに戻るのではなく、その前のページに戻るようにしたいときにreplaceオプションを使うことができる。

const handleSubmit = () => {
  // フォームを送信した後、確認ページに移動する。
  // ただし、ブラウザの「戻る」ボタンでフォームページには戻れないようにする。
  navigate('/confirmation', { replace: true });
 // false（デフォルト）:ユーザーが「戻る」ボタンを押すと、元のページに戻る。
 // true: ユーザーが「戻る」ボタンを押すと、その前のページに戻る。
};