React Router で前のパスを取得する方法：初心者向けから上級者向けまで

React Router で前のパスを検知する方法

useHistory Hook は、ブラウザの履歴情報を操作するためのツールです。この Hook を利用すれば、前のパスにアクセスすることができます。

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

const MyComponent = () => {
  const history = useHistory();
  const previousPath = history.location.pathname;

  return (
    <div>
      <h1>前のパス: {previousPath}</h1>
    </div>
  );
};

この例では、useHistory Hook を利用して history オブジェクトを取得し、location.pathname プロパティで前のパスにアクセスしています。

react-router-dom の withRouter HOC を利用する

withRouter HOC は、コンポーネントに router プロパティを注入するものです。この router プロパティには、ブラウザの履歴情報に関する情報が含まれています。

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

class MyComponent extends React.Component {
  render() {
    const previousPath = this.props.router.location.pathname;

    return (
      <div>
        <h1>前のパス: {previousPath}</h1>
      </div>
    );
  }
}

export default withRouter(MyComponent);

react-router-redux は、React Router と Redux を統合するためのライブラリです。このライブラリを利用すれば、Redux ストアにブラウザの履歴情報に関する情報を保存することができます。

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

const mapStateToProps = (state) => {
  return {
    previousPath: state.router.location.pathname,
  };
};

class MyComponent extends React.Component {
  render() {
    const { previousPath } = this.props;

    return (
      <div>
        <h1>前のパス: {previousPath}</h1>
      </div>
    );
  }
}

export default withRouter(connect(mapStateToProps)(MyComponent));

この例では、react-router-redux と connect 関数を利用して、Redux ストアからブラウザの履歴情報に関する情報を取得しています。

これらの方法はいずれも、React Router で前のパスを検知するための有効な方法です。どの方法を使うかは、プロジェクトの要件や開発者の好みによって異なります。

補足

• 上記の例では、前のパスを取得する方法のみを説明しています。前のパスに基づいて何か処理を行う場合は、その処理内容を追加する必要があります。
• React Router v6 では、useLocation Hook が導入されました。この Hook を利用すれば、location オブジェクトにアクセスすることができます。location.pathname プロパティで前のパスにアクセスできます。

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

const MyComponent = () => {
  const location = useLocation();
  const previousPath = location.pathname;

  return (
    <div>
      <h1>前のパス: {previousPath}</h1>
    </div>
  );
};

サンプルコード: React Router で前のパスを検知する

ファイル構成

src/
├── App.js
├── MyComponent.js
└── index.js

コード

App.js

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

MyComponent.js

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

const MyComponent = () => {
  const history = useHistory();
  const previousPath = history.location.pathname;

  return (
    <div>
      <h1>前のパス: {previousPath}</h1>
    </div>
  );
};

export default MyComponent;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

実行方法

1. 上記のコードを src ディレクトリに保存します。
2. ターミナルで以下のコマンドを実行します。

npm start

1. ブラウザで http://localhost:3000 にアクセスします。
2. 各ページに移動すると、コンポーネントに前のパスが表示されます。

説明

• App.js は、React Router を利用してルーティングを設定しています。
• MyComponent.js は、useHistory Hook を利用して前のパスを取得し、コンポーネントに表示しています。
• index.js は、React アプリケーションの起動処理を行っています。

注意事項

• このサンプルコードは、あくまでも基本的な例です。実際のプロジェクトでは、必要に応じてコードを修正する必要があります。

React Router で前のパスを検知するその他の方法

window.history.length は、ブラウザの履歴にあるエントリの数を取得するプロパティです。このプロパティを利用すれば、前のパスにアクセスすることができます。

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [previousPath, setPreviousPath] = useState('');

  useEffect(() => {
    const handlePopState = () => {
      const newPreviousPath = window.history.length === 2 ? '/' : window.history.location.pathname;
      setPreviousPath(newPreviousPath);
    };

    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  return (
    <div>
      <h1>前のパス: {previousPath}</h1>
    </div>
  );
};

この例では、useEffect Hook を利用して window.addEventListener 関数を呼び出し、popstate イベントのリスナーを登録しています。このイベントは、ブラウザの履歴が変化したときに発生します。イベントが発生すると、handlePopState 関数が実行され、前のパスを取得して previousPath ステートに設定します。

カスタム Hook を作成すれば、useHistory Hook や window.history オブジェクトを抽象化して、前のパスを取得するロジックを再利用することができます。

import React, { useState, useEffect } from 'react';

const usePreviousPath = () => {
  const [previousPath, setPreviousPath] = useState('');

  useEffect(() => {
    const handlePopState = () => {
      const newPreviousPath = window.history.length === 2 ? '/' : window.history.location.pathname;
      setPreviousPath(newPreviousPath);
    };

    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  return previousPath;
};

const MyComponent = () => {
  const previousPath = usePreviousPath();

  return (
    <div>
      <h1>前のパス: {previousPath}</h1>
    </div>
  );
};

この例では、usePreviousPath というカスタム Hook を作成しています。この Hook は、useEffect Hook を利用して window.addEventListener 関数を呼び出し、popstate イベントのリスナーを登録します。このイベントが発生すると、前のパスを取得して previousPath ステートに設定します。そして、previousPath ステートを返します。

MyComponent コンポーネントでは、usePreviousPath Hook を利用して前のパスを取得しています。

各方法の比較

どの方法を使うかは、プロジェクトの要件や開発者の好みによって異なります。