React Router v4でSPAのナビゲーションを構築する

React Router v4で履歴にプッシュする方法

概要

使用方法

history.push()メソッドは、以下の引数を受け取ります。

• path: プッシュしたいURL
• state: オプションのオブジェクト。遷移先のコンポーネントに渡すデータなどを格納できます。

例

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/new-page');
  };

  return (
    <button onClick={handleClick}>新しいページへ</button>
  );
};

上記のコードでは、handleClick()関数を実行すると、/new-pageというURLが履歴にプッシュされ、ブラウザのURLバーに表示されます。

• history.push()メソッドは、history.replace()メソッドと似ています。history.replace()メソッドは、現在の履歴エントリを新しいURLで置き換えます。
• history.push()メソッドは、コンポーネント内だけでなく、コンポーネント外からも使用できます。

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link, useHistory } from 'react-router-dom';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 履歴に新しいURLをプッシュ
    history.push(`/counter/${count + 1}`);
  };

  return (
    <Router>
      <div>
        <h1>カウント: {count}</h1>
        <button onClick={handleClick}>カウントアップ</button>
        <Route path="/counter/:count" component={Counter} />
      </div>
    </Router>
  );
};

const Counter = ({ match }) => {
  const count = parseInt(match.params.count, 10);

  return (
    <div>
      <h2>カウント: {count}</h2>
    </div>
  );
};

export default App;

このコードを実行すると、以下のような動作になります。

• 最初、/というURLが表示されます。
• カウントアップボタンをクリックすると、/counter/1というURLが履歴にプッシュされます。
• ブラウザのURLバーには、/counter/1が表示されます。
• Counterコンポーネントがレンダリングされ、カウント: 1というテキストが表示されます。

このサンプルコードは、history.push()メソッドを使って、React Router v4で履歴にプッシュする方法の基本的な例です。

React Router v4で履歴にプッシュする他の方法

<Link>コンポーネントを使うと、ユーザーがクリックしたときに新しいURLを履歴にプッシュすることができます。

<Link to="/new-page">新しいページへ</Link>

上記のように、to属性に新しいURLを指定することで、ユーザーがクリックしたときにそのURLが履歴にプッシュされます。

useNavigateフックを使うと、コンポーネント内からプログラム的に新しいURLを履歴にプッシュすることができます。

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

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

  const handleClick = () => {
    navigate('/new-page');
  };

  return (
    <button onClick={handleClick}>新しいページへ</button>
  );
};

上記のコードでは、navigate()関数を使って、/new-pageというURLを履歴にプッシュしています。

withRouter高階コンポーネントを使うと、コンポーネントにhistoryプロパティを注入することができます。

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

const MyComponent = ({ history }) => {
  const handleClick = () => {
    history.push('/new-page');
  };

  return (
    <button onClick={handleClick}>新しいページへ</button>
  );
};

export default withRouter(MyComponent);

上記のコードでは、withRouter高階コンポーネントを使って、MyComponentコンポーネントにhistoryプロパティを注入しています。historyプロパティを使うと、コンポーネント内からプログラム的に新しいURLを履歴にプッシュすることができます。

React Router v4で履歴にプッシュするには、history.push()メソッド以外にも、<Link>コンポーネント、useNavigateフック、withRouter高階コンポーネントなどの方法があります。

それぞれの方法にはメリットとデメリットがあるので、状況に合わせて最適な方法を選択してください。