React RouterでURLを取得し、画面表示する方法

ReactアプリでURLのパスを取得する方法について解説します。
React Routerを使うと、現在のURLを簡単に取得でき、それを使ってアプリの挙動を制御できます。

URLを取得する基本的な方法
1. useLocation フックを利用
2. generatePath()を利用してURLを動的に生成
URL取得とページ遷移の組み合わせ

URLを取得する基本的な方法

useLocation フックを利用

React RouterのuseLocationフックを使って、現在のURLを取得できます。以下のように簡単に実装可能です。

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

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

上記のコードでは、location.pathnameを使って現在のURLパスを取得し、それを画面に表示しています。

generatePath()を利用してURLを動的に生成

URLのパスに動的なパラメータを挿入する場合、generatePath()を使用します。例えば、ユーザーIDを含むURLを生成する方法です。

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

function MyComponent() {
  const userId = 123;
  const path = generatePath("/users/:id", { id: userId });
  return <p>Generated Path: {path}</p>;
}

この例では、/users/:idのURLパスに動的にユーザーIDを挿入し、/users/123を生成しています。

URL取得とページ遷移の組み合わせ

URL取得は、ページ遷移と組み合わせて使用することが多いです。
例えば、特定のページに遷移する際に現在のURLを取得して、別のロジックに利用するケースです。

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

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

  const handleClick = () => {
    history.push('/new-page');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to new page</button>
    </div>
  );
}

このように、useHistoryを使用して、ユーザーがクリックした際に新しいURLに遷移する処理を実装できます。