【React】useLocationをつかってクエリパラメータを扱う

useLocationとは？

useLocationは、React RouterのHooksの1つで、現在のURLを表すlocationオブジェクトを取得するために使用されます。locationオブジェクトには、現在のURLやクエリパラメーター、URLに含まれる任意のパラメーターなど、URLに関する情報が含まれます。

useLocationの使い方

useLocationを使用すると、現在のURLを読み取り、必要な情報を抽出することができます。以下は、useLocationの簡単な例です。

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

function MyComponent() {
  const location = useLocation();

  return (
    <div>
      <h2>Pathname: {location.pathname}</h2>
      <h2>Search: {location.search}</h2>
      <h2>Hash: {location.hash}</h2>
    </div>
  );
}

上記の例では、useLocationを使用して、locationオブジェクトを取得しています。そして、locationオブジェクトからpathname、search、hashなどの情報を抽出して、Reactコンポーネント内で表示しています。

useLocationは、React Routerを使用する場合に非常に便利で、URLに関する情報を必要に応じて取得することができます。URLに含まれる情報を読み取り、Reactコンポーネント内で使用することができます。例えば、クエリパラメーターからユーザーが入力した検索クエリを取得したり、URLの一部に基づいてReactコンポーネントをレンダリングしたりすることができます。

stateプロパティを使って画面遷移時にデータを情報の受け渡し

stateプロパティとuseLocationを一緒につかうことでコンポーネント間で簡単にデータの情報を共有することができます。

stateプロパティとは？

stateプロパティは、Reactコンポーネント間でデータを共有するために非常に便利で、React Router v5の新しい機能として導入されました。stateプロパティを使用することで、Reactコンポーネント間でデータを渡すことができ、Reactコンポーネント内で必要な情報を表示することができます。

stateプロパティの使い方

以下は、stateプロパティを使用して、リンクからのデータを別のページで表示する具体的な例です。

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

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to={{ pathname: "/about", state: { name: "John", age: 30 } }}>Go to About page</Link>
    </div>
  );
}

function About() {
  const location = useLocation();
  const { name, age } = location.state;

  return (
    <div>
      <h1>About Page</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

この例では、HomeコンポーネントでLinkコンポーネントを使用して、stateプロパティにnameとageプロパティを設定しています。

stateプロパティを使う時はLinkのpath設定を以下のようにするのがポイントです。ここの部分に渡したい情報をstateに格納します。

  <Link to={{ pathname: "/about", state: { name: "John", age: 30 } }}>

渡したい情報をstateにセットしたら受け取る時にはuseLocationを使って受け取ります。

このLinkコンポーネントをクリックすると、React RouterはAboutコンポーネントに遷移します。Aboutコンポーネントでは、useLocationフックを使用してlocationオブジェクトを取得し、stateプロパティからnameとageプロパティを読み取って表示しています。

このように、stateプロパティを使用することで、Reactコンポーネント間でデータを簡単に渡すことができます。また、stateプロパティを使用することで、React Routerを使用するアプリケーションでのページ間の情報共有をより簡単に行うことができます。