ブラウザ履歴操作・Linkコンポーネント・カスタムフック…「前のページに戻る」を自在に実現！

2024-06-24

Reactjs、Next.jsにおける「前のページに戻る」機能の実装方法

ブラウザの履歴操作を利用する方法

これは最もシンプルで、ブラウザの「戻る」ボタンを押下するのと同様の動作となります。

Reactjsの場合:
- useHistoryフックを使用して、ブラウザ履歴を操作することができます。
- history.goBack()メソッドを呼び出すことで、一つ前のページへ遷移できます。

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

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

  const handleGoBack = () => {
    history.goBack();
  };

  return (
    <div>
      <button onClick={handleGoBack}>前のページへ戻る</button>
    </div>
  );
}

import React from 'react';
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleGoBack = () => {
    router.back();
  };

  return (
    <div>
      <button onClick={handleGoBack}>前のページへ戻る</button>
    </div>
  );
}

Linkコンポーネントを利用する方法

これは、Linkコンポーネントにasプロパティとhrefプロパティを設定することで実現できます。

asプロパティには、表示されるURLパスを設定します。

この方法では、ブラウザ履歴に残らずに前のページへ遷移することができます。

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

function MyComponent() {
  return (
    <div>
      <Link as="/" href="/previous-page">前のページへ戻る</Link>
    </div>
  );
}

補足

上記以外にも、ライブラリなどを利用して「前のページに戻る」機能を実現する方法があります。
特定の条件下でのみ前のページへ戻れるようにしたい場合は、useEffectフックなどを利用して制御を行うことができます。

ReactjsとNext.jsにおける「前のページに戻る」機能実装のサンプルコード

ブラウザの履歴操作を利用する方法

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

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

  const handleGoBack = () => {
    history.goBack();
  };

  return (
    <div>
      <button onClick={handleGoBack}>前のページへ戻る</button>
    </div>
  );
}

Next.js

import React from 'react';
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleGoBack = () => {
    router.back();
  };

  return (
    <div>
      <button onClick={handleGoBack}>前のページへ戻る</button>
    </div>
  );
}

Linkコンポーネントを利用する方法

Reactjs

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

function MyComponent() {
  return (
    <div>
      <Link as="/" href="/previous-page">前のページへ戻る</Link>
    </div>
  );
}

import React from 'react';
import Link from 'next/link';

function MyComponent() {
  return (
    <div>
      <Link href="/previous-page">前のページへ戻る</Link>
    </div>
  );
}

上記のコードはあくまで一例であり、状況に合わせて適宜カスタマイズする必要があります。
コンポーネントやファイルパスは、実際のプロジェクトに合わせて変更してください。

Reactjs、Next.jsにおける「前のページに戻る」機能の実装方法：その他の方法

カスタムフックを利用する方法

この方法は、useRefフックとuseEffectフックを組み合わせて、前のページの情報と状態を保持し、必要なタイミングで前のページへ遷移を行うというものです。

具体的な実装方法としては、以下のようになります。

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

function usePreviousPage() {
  const previousPageRef = useRef(null);

  useEffect(() => {
    previousPageRef.current = window.location.pathname;
  }, []);

  const goBackToPreviousPage = () => {
    const previousPage = previousPageRef.current;
    if (previousPage) {
      window.history.pushState({}, '', previousPage);
    }
  };

  return goBackToPreviousPage;
}

function MyComponent() {
  const goBackToPreviousPage = usePreviousPage();

  return (
    <div>
      <button onClick={goBackToPreviousPage}>前のページへ戻る</button>
    </div>
  );
}