React Router v6 で前のルートに戻る方法を徹底解説！初心者でも安心のサンプルコード付き

2024-05-20

React Router v6 で前のルートに戻る方法

概要

手順

useNavigate フックをインポートする:

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

前のルートに戻るために useNavigate フックを使用する:

const navigate = useNavigate();

const PreviousRouteButton = () => {
  return (
    <button onClick={() => navigate(-1)}>前のルートへ戻る</button>
  );
};

オプション:

navigate(-2) を使用すると、2つ前のルートに戻ることができます。
navigate({ pathname: '/previous-route' }) を使用すると、特定のルートに直接移動できます。

例

次の例では、PreviousRouteButton コンポーネントを使用して前のルートに戻る方法を示します。

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

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

  return (
    <button onClick={() => navigate(-1)}>前のルートへ戻る</button>
  );
};

const App = () => {
  return (
    <div>
      <PreviousRouteButton />

      {/* ここに他のコンポーネントを配置します */}
    </div>
  );
};

export default App;

この例では、PreviousRouteButton コンポーネントをクリックすると、useNavigate フックを使用して前のルートに戻ります。

注意事項

useNavigate フックは、コンポーネント内でのみ使用できます。
useNavigate フックは、非同期操作です。そのため、navigate 関数を呼び出した後、すぐに次のステートメントを実行しないようにしてください。

useNavigate フックを使用して、react-router-dom v6 で前のルートに戻る方法は簡単です。このフックを使用することで、ユーザーがアプリケーション内で簡単にナビゲートできるようになります。

PreviousRouteButton コンポーネント

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

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

  return (
    <button onClick={() => navigate(-1)}>前のルートへ戻る</button>
  );
};

export default PreviousRouteButton;

このコンポーネントは、useNavigate フックを使用して前のルートに戻るボタンを提供します。

App コンポーネント

import React from 'react';
import PreviousRouteButton from './PreviousRouteButton';

const App = () => {
  return (
    <div>
      <PreviousRouteButton />

      {/* ここに他のコンポーネントを配置します */}
    </div>
  );
};

export default App;

このコンポーネントは、PreviousRouteButton コンポーネントをレンダリングします。

補足:

上記のコードは、React Router v6 と react-router-dom パッケージをインストールしていることを前提としています。
PreviousRouteButton コンポーネントは、必要に応じてカスタマイズできます。
App コンポーネントは、他のコンポーネントで構成することができます。

実行

このコードを実行するには、以下の手順を実行します。

プロジェクトディレクトリに移動します。
以下のコマンドを実行します。

npm start

ブラウザで http://localhost:3000 にアクセスします。

このコードを実行すると、PreviousRouteButton ボタンが表示されます。このボタンをクリックすると、前のルートに戻ることができます。

注意事項

実際のアプリケーションでは、必要に応じてコードを修正する必要があります。

React Router v6 で前のルートに戻るその他の方法

useHistory フックを使用する:

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

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

  return (
    <button onClick={() => history.goBack()}>前のルートへ戻る</button>
  );
};

history.replace を使用する:

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

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

  return (
    <button onClick={() => history.replace(-1)}>前のルートへ置き換える</button>
  );
};

Link コンポーネントを使用する:

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

const PreviousRouteButton = () => {
  return (
    <Link to="..">前のルートへ戻る</Link>
  );
};

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

const PreviousRouteButton = () => {
  const location = useLocation();

  const previousPath = location.pathname.split('/').slice(-2, -1)[0];

  return (
    <Link to={`/${previousPath}`}>前のルートへ戻る</Link>
  );
};

window.history.go を使用する:

const PreviousRouteButton = () => {
  return (
    <button onClick={() => window.history.go(-1)}>前のルートへ戻る</button>
  );
};

注意事項:

上記の方法はすべて、状況によっては問題が発生する可能性があります。
useNavigate フックは、React Router v6 で推奨されている方法です。
他の方法を使用する場合は、その方法の潜在的な問題点に注意する必要があります。

React Router v6 で前のルートに戻る方法はいくつかありますが、useNavigate フックが最もシンプルで使いやすい方法です。他の方法を使用する場合は、その方法の潜在的な問題点に注意してください。

reactjs react-router react-router-dom

React Router v6 で前のルートに戻る方法を徹底解説！初心者でも安心のサンプルコード付き