【React】useNavigateの使い方

本記事の目次

React RouterとuseNavigate
useNavigateの基本的な使い方
useNavigateの応用的な使い方

React RouterとuseNavigate

近年のフロントエンド開発では、SPA (Single Page Application) の人気が高まっています。

SPAでは、ページ遷移を伴わずにアプリケーションの各部分を動的に更新するため、ユーザー体験が向上します。

そのためのルーティングを簡単に実現するのが、React Routerの役割です。

React RouterはReactの公式ライブラリではありませんが、多くのReactアプリケーションで採用されています。

React Router V6では、useHistoryが廃止され、その代わりにuseNavigateが導入されました。

useNavigateによって、プログラム的な画面遷移を非常にシンプルに行うことができるようになりました。

useNavigateの基本的な使い方

useNavigateの導入

useNavigate（React Router）を使う前に、プロジェクトに必要なライブラリ「react-router-dom」をインストールする必要があります。

npm install react-router-dom

次に、React Routerで基本のルーティング設定を行い、BrowserRouterでラップします。

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
  return (
    // BrowserRouterでラップする
    <BrowserRouter>
      // ルーティングを設定する
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

ルーティング部分は、プロジェクトに応じて適切に設定してください。

そして、useNavigateを利用したいコンポーネントでインポートします。

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

useNavigateを使ったシンプルなページ遷移

useNavigateを使って、aタグのようなシンプルなページ遷移を実装します。

import { useNavigate } from 'react-router-dom';
const Button = () => {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate('/home');
  };

  return (
    <button onClick={handleButtonClick}>
      ホーム画面へ
    </button>
  );
}

この例では、Buttonコンポーネントで表示される「ホーム画面へ」ボタンをクリックすると「/home」のページに遷移します。

URLパラメータを指定してページ遷移する

useNavigateを使って、URLパラメータを指定してページ遷移することも可能です。

例えば、ユーザーIDを指定してユーザーページに遷移する場合は以下のようになります。

import { useNavigate } from 'react-router-dom';
const Button = () => {
  const navigate = useNavigate();
  const user_id = "abcde";

  const handleButtonClick = () => {
    navigate(`/user/${user_id}`);
  };

  return (
    <button onClick={handleButtonClick}>
      ユーザーページへ
    </button>
  );
}

useNavigateの応用的な使い方

条件に応じたページ遷移

useNavigateを使うことで、ログインの状態に応じて遷移先を変えるなど、何かしらの条件に応じて異なるページ遷移も容易に実装することができます。

import { useNavigate } from 'react-router-dom';
const Navigate = () => {
  const navigate = useNavigate();

  if (isLoggedIn) {
    navigate('/dashboard');
  } else { 
    navigate('/login');
  }

  return <p>ページ遷移する</p>;
}

前のページに戻る方法（ブラウザバック）

navigateに-1を渡すことで、ブラウザの戻るボタンと同様の動作を実現できます。

import { useNavigate } from 'react-router-dom';
const Navigate = () => {
  const navigate = useNavigate();

  navigate(-1);
  return <p>ブラウザバックする</p>;
}

stateを持って遷移する方法

useNavigateを使って遷移先のページで必要なデータを持って遷移する場合、stateを利用します。

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

navigate('/nextpage', { state: { message: "This is a custom message!" } });

遷移先のコンポーネントでは、useLocationを使用してstateを取得できます。

import { useLocation } from 'react-router-dom';

const NextPage = () => {
  const location = useLocation();
  return (
  　　<p>{location.state.message}</p>
  );
}