【React】プログラム的にURLを変更するuseNavigate

useNavigateとは？
useNavigateを使った例
LinkとuseNavigateを使った画面遷移の違い
- LinkとuseNavigateの違い

useNavigateとは？

useNavigateはReact Router v6で導入されたフックの1つで、Reactコンポーネント内でプログラム的にURLを変更するために使用されます。

プログラム的にURLを変更するとは、JavaScriptコードを使用して、ブラウザのアドレスバーに表示されるURLを変更することを指します。

通常、ユーザーがリンクをクリックすることで、URLが変更されます。しかし、JavaScriptコードを使用してURLを変更することもできます。例えば、フォームの送信や、タイマーの経過など、ユーザーの操作に依存せずにURLを変更する必要がある場合があります。

Reactコンポーネント内でURLを変更する場合、React RouterのuseNavigateフックを使用することができます。このフックを使用すると、Reactコンポーネント内でJavaScriptコードを使用して、ブラウザのURLを変更することができます。

useNavigateを使った例

次のようなコードを使用して、ボタンがクリックされたときにURLを変更することができます。

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

function MyComponent() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/path/to/some/page');
  }

  return (
    <button onClick={handleClick}>Go to some page</button>
  );
}

この例では、ボタンがクリックされたときに、ブラウザのURLが「/path/to/some/page」に変更されます。これにより、Reactコンポーネント内でプログラム的にURLを変更することができます。

LinkとuseNavigateを使った画面遷移の違い

LinkとuseNavigateは、どちらもReact Routerを使った画面遷移を実現するための方法ですが、使い分けには以下のような特徴があります。

Link

Linkは、HTMLのaタグに似た形で、文字列やアイコンなどをクリックして画面遷移する場合に適しています。Linkをまず、Linkは、React Routerの提供するコンポーネントの一つで、ブラウザのリンクと同様に、クリックするだけで指定したパスに遷移することができます。以下はLinkの例です。

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

function MyComponent() {
  return (
    <div>
      <Link to="/path/to/some/page">Go to some page</Link>
    </div>
  );
}

useNavigate

一方、useNavigateは、React Routerの提供するフックの一つで、関数コンポーネント内で使うことができます。useNavigateを使うと、プログラム的に画面遷移を行うことができます。以下はuseNavigateの例です。

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

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/path/to/some/page');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to some page</button>
    </div>
  );
}

useNavigateフックを使用して、navigate関数を取得します。その後、任意のタイミングでnavigate関数を実行することで、URLを変更することができます。

LinkとuseNavigateは、静的なリンクと動的なリンクを実現するための違うツールであるため、どちらを使用するかは、実現したい機能やUIによって異なります。