usePathnameとuseLocationの違い

usePathnameとuseLocationは、どちらも現在のURLパスを取得するためのフックですが、異なるライブラリから提供されています。それぞれの違いを以下に示します。
usePathname
提供元: Next.js
用途: Next.jsアプリケーションで現在のURLパスを取得するために使用されます。
使用方法:

  import { usePathname } from 'next/navigation';

  const MyComponent = () => {
    const pathname = usePathname();
    return <div>Current pathname: {pathname}</div>;
  };

• 特徴:
  Next.jsのApp Routerで使用される。
  クライアントコンポーネントでのみ使用可能。
  現在のURLのパス名を返す。
  useLocation
  提供元: React Router
  用途: React Routerを使用するアプリケーションで現在のURL情報を取得するために使用されます。
  使用方法:

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

  const MyComponent = () => {
    const location = useLocation();
    return <div>Current pathname: {location.pathname}</div>;
  };

• 特徴:
  React Routerで使用される。
  URLのパス名だけでなく、検索クエリやハッシュなどの他のURL情報も含むlocationオブジェクトを返す。
  違いのまとめ
  ライブラリ: usePathnameはNext.js、useLocationはReact Routerから提供されます。
  機能: usePathnameはパス名のみを返すのに対し、useLocationはパス名、検索クエリ、ハッシュなどの詳細なURL情報を返します。
  使用シナリオ: Next.jsを使用している場合はusePathname、React Routerを使用している場合はuseLocationを使用します。
  参考リンク:
  Next.js usePathname ドキュメント
  React Router useLocation ドキュメント