React Router v4 パラメータ渡し (*React Router v4 Parameter Passing*)

React Router v4 で history.push/Link/Redirect にパラメータを渡す方法

React Router v4 では、history.push、Link、Redirect コンポーネントを使用して、URL にパラメータを渡すことができます。

history.push を使用する場合

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

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

  const handleClick = () => {
    history.push('/path/to/page', { id: 123, name: 'John Doe' });
  };

  return <button onClick={handleClick}>Navigate</button>;
}

• history.push には、パスとオプションのオブジェクトを渡します。オブジェクトには、パラメータをキーと値のペアとして格納します。
• 遷移先のコンポーネントで、useParams フックを使用してこれらのパラメータにアクセスできます。

Link コンポーネントを使用する場合

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

function MyComponent() {
  const params = { id: 123, name: 'John Doe' };

  return <Link to={{ pathname: '/path/to/page', state: params }}>Navigate</Link>;
}

• Link コンポーネントの to プロパティにオブジェクトを渡します。オブジェクトには、パスと state キーを指定します。state キーにパラメータを格納します。
• 遷移先のコンポーネントで、useLocation フックを使用して location.state からパラメータにアクセスできます。

Redirect コンポーネントを使用する場合

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

function MyComponent() {
  const params = { id: 123, name: 'John Doe' };

  return <Redirect to={{ pathname: '/path/to/page', state: params }} />;
}

注意:

• state プロパティはブラウザの履歴に保存されるため、ページをリロードするとパラメータが失われます。永続的なパラメータが必要な場合は、URL パラメータを使用することを検討してください。
• useParams と useLocation フックは、遷移先のコンポーネントでパラメータにアクセスするために使用されます。

React Router v4 でパラメータを渡す方法

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

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

  const handleClick = () => {
    history.push('/path/to/page', { id: 123, name: 'John Doe' });
  };

  return <button onClick={handleClick}>Navigate</button>;
}

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

function MyComponent() {
  const params = { id: 123, name: 'John Doe' };

  return <Link to={{ pathname: '/path/to/page', state: params }}>Navigate</Link>;
}

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

function MyComponent() {
  const params = { id: 123, name: 'John Doe' };

  return <Redirect to={{ pathname: '/path/to/page', state: params }} />;
}

URL パラメータを使用する

• URL に直接パラメータを含めることができます。
• 例: /path/to/page?id=123&name=John%20Doe

useSearchParams フックを使用する

• useSearchParams フックを使用して、URL パラメータを管理できます。
• 例:

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

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get('id');
  const name = searchParams.get('name');

  return <   div>{id} {name}</div>;
}

useLocation フックを使用する

• useLocation フックを使用して、現在の URL 情報にアクセスできます。

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

function MyComponent() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);

  const id = params.get('id');
     const name = params.get('name');

     return <div>{id} {name}</div>;
}

• URL パラメータを使用する場合、URL にパラメータが含まれるため、ブラウザの履歴に保存されます。
• 各メソッドには独自の利点と欠点があります。適切な方法を選択するには、アプリケーションの要件と好みを考慮してください。