React hooks History使用方法まとめ

ページ遷移の際に使用するHistoryの使用方法についてまとめました。

基本的な使用方法

実行された際に、引数で指定したpathに遷移します。

history.push('/new-path');

現在のpathからの相対pathで指定する場合は以下のように記述することで、現在のpathを参照できます。

history.push(`${history.location.pathname}/hoge`);

プロパティ

history.pushには、以下のようなプロパティを指定できます。

1. パス（path）:

   • ページ遷移するURLを指定します。

   history.push('/new-path');
   

2. オプション（state, pathname, search, hash）:

   • オブジェクト形式で複数のプロパティを指定することができます。

   history.push({
       pathname: '/new-path',
       search: '?query=abc',
       hash: '#hash',
       state: { fromDashboard: true }
   });
   

オプション詳細

• pathname:

  • 移動先のURLパスを指定します。

  pathname: '/new-path'
  

• search:

  • クエリパラメータを指定します。?を含む文字列を指定します。

  search: '?query=abc'
  

• hash:

  • URLのハッシュ部分を指定します。#を含む文字列を指定します。

  hash: '#section2'
  

• state:

  • 移動先に渡す状態情報をオブジェクト形式で指定します。これにより、ページ間で追加の情報を渡すことができます。

  state: { fromDashboard: true }
  `
  
  
  

使用例

history.push({
    pathname: '/new-path',
    search: '?query=abc',
    hash: '#section2',
    state: { fromDashboard: true }
});

• pathname: '/new-path' への遷移を指定します。
• search: クエリパラメータとして'?query=abc'を指定します。
• hash: URLのハッシュ部分として'#section2'を指定します。
• state: { fromDashboard: true } という状態情報を渡します。この情報は、遷移先のコンポーネントでlocation.stateを通じてアクセスできます。

状態情報の取得

遷移先のコンポーネントで状態情報を取得するには、useLocationフックを使います。

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

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

    console.log(location.state); // { fromDashboard: true }

    return (
        <div>
            <h2>New Path</h2>
            <p>State: {JSON.stringify(location.state)}</p>
        </div>
    );
}

export default NewPathComponent;