useLocation(): locationオブジェクトのプロパティ（React Router v5.1）

useLocation フックは バージョン5.1から導入された React Router ライブラリのフックの一つで、現在のURLの場所（location）に関する情報を提供する。URLのパス名、検索クエリ、ハッシュなどの情報に基づいてコンポーネントのレンダリングや動作を条件付きで制御できる。

useLocation が返す location オブジェクトに含まれるプロパティは、以下の通り。

例:
https://example.com/about?name=John&age=30#team

pathname

URLのパス部分を表す。上記の例では、pathname は /about となる。

search

クエリパラメータを含む文字列。上記の例では、search は ?name=John&age=30 となる。

hash

URLのハッシュフラグメントを表す。上記の例では、hash は #team となる。

key

ロケーションのユニークな識別子で、React Routerによって自動生成される。ページが新しく読み込まれたり、履歴が変更されたときに更新される。

//使用例
import React from 'react';
import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();  // ロケーションオブジェクトを取得

  // 各プロパティを取得
  const pathname = location.pathname;  // URLのパス部分
  const search = location.search;      // クエリパラメータ
  const hash = location.hash;          // ハッシュフラグメント
  const key = location.key;            // ロケーションのユニークキー

  return (
    <div>
      <p>Current pathname: {pathname}</p>
      <p>Current search: {search}</p>
      <p>Current hash: {hash}</p>
      <p>Current key: {key}</p>
    </div>
  );
}

export default MyComponent;

state

ページ間のナビゲーションにおいて追加の状態情報を渡すために使用される。state プロパティは、ナビゲーション操作時に任意のデータを次のページに非表示で渡すことができる機能。これにより、URLに表示したくない情報を安全に渡すことが可能になる。

//HomePage.tsx
import React from 'react';
import { Link } from 'react-router-dom';

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to={{
        pathname: "/about",
        state: { from: 'HomePage' }
      }}>
        Go to About Page
      </Link>
    </div>
  );
}
export default HomePage;

//AboutPage.tsx
import React from 'react';
import { useLocation } from 'react-router-dom';

const AboutPage = () => {
  const location = useLocation<{ from: string }>();
  const { pathname } = location;

  return (
    <div>
      <h1>About Page</h1>
      <p>Current Path: {pathname}</p>
      <p>Redirected from: {location?.state?.from}</p>
    </div>
  );
}
export default AboutPage;