Route コンポーネントの onUpdate プロパティを使ってルート変更を検出する方法

React Router v4 でルート変更を検出する方法

useLocation Hook は、現在の URL と履歴情報を提供します。この Hook を使って、前回の URL と現在の URL を比較することで、ルート変更を検出できます。

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

function MyComponent() {
  const location = useLocation();
  const previousLocation = useRef(location);

  useEffect(() => {
    if (previousLocation.current.pathname !== location.pathname) {
      // ルートが変更された時の処理
    }

    previousLocation.current = location;
  }, [location]);

  return (
    // ...
  );
}

history オブジェクトは、ブラウザの履歴を操作するための API を提供します。listen メソッドを使って、URL の変更を監視できます。

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

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

  useEffect(() => {
    const unlisten = history.listen((location) => {
      // ルートが変更された時の処理
    });

    return () => unlisten();
  }, []);

  return (
    // ...
  );
}

Route コンポーネントには、onUpdate プロパティがあります。このプロパティに、ルートが更新された時に呼び出される関数を指定できます。

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

function MyComponent() {
  return (
    <Route
      path="/my-route"
      onUpdate={() => {
        // ルートが更新された時の処理
      }}
    >
      // ...
    </Route>
  );
}

これらの方法のどれを使うかは、あなたのアプリケーションの要件によって異なります。

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

function MyComponent() {
  const [previousLocation, setPreviousLocation] = useState(null);
  const location = useLocation();

  useEffect(() => {
    if (previousLocation !== null && previousLocation.pathname !== location.pathname) {
      // ルートが変更された時の処理
      console.log('ルートが変更されました:', previousLocation.pathname, '->', location.pathname);
    }

    setPreviousLocation(location);
  }, [location]);

  return (
    <div>
      現在の URL: {location.pathname}
    </div>
  );
}

export default MyComponent;

このコードを App.js ファイルに保存し、react-router-dom パッケージをインストールして、以下のコマンドを実行すると、ブラウザで http://localhost:3000 を開きます。

npm start

ブラウザで別の URL に移動すると、コンソールに "ルートが変更されました:" というメッセージが表示されます。

このサンプルコードは、ルート変更を検出する簡単な方法を示しています。history オブジェクトや Route コンポーネントの onUpdate プロパティを使って、より複雑な処理を行うこともできます。

ルート変更を検出する他の方法

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

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

  useEffect(() => {
    const unlisten = history.listen((location) => {
      // ルートが変更された時の処理
    });

    return () => unlisten();
  }, []);

  return (
    // ...
  );
}

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

function MyComponent() {
  return (
    <Route
      path="/my-route"
      onUpdate={() => {
        // ルートが更新された時の処理
      }}
    >
      // ...
    </Route>
  );
}

Higher-Order Component (HOC) は、別のコンポーネントをラップして、追加の機能を提供する関数です。HOC を使って、ルート変更を検出する機能を追加できます。

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

const withRouteChangeDetection = (WrappedComponent) => {
  class RouteChangeDetectionHOC extends Component {
    constructor(props) {
      super(props);

      this.state = {
        previousLocation: null,
      };
    }

    componentDidUpdate(prevProps) {
      if (prevProps.location.pathname !== this.props.location.pathname) {
        // ルートが変更された時の処理
      }
    }

    render() {
      return (
        <WrappedComponent
          {...this.props}
          previousLocation={this.state.previousLocation}
        />
      );
    }
  }

  return withRouter(RouteChangeDetectionHOC);
};

export default withRouteChangeDetection;

この HOC を使って、ルート変更を検出する機能を別のコンポーネントに追加できます。

import React from 'react';
import MyComponent from './MyComponent';
import withRouteChangeDetection from './withRouteChangeDetection';

const MyComponentWithRouteChangeDetection = withRouteChangeDetection(MyComponent);

export default MyComponentWithRouteChangeDetection;