React Router v4 パラメータ渡し (*React Router v4 Parameter Passing*)
2024-09-14
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>;
}
- 遷移先のコンポーネントで、
useParamsフックを使用してこれらのパラメータにアクセスできます。 history.pushには、パスとオプションのオブジェクトを渡します。オブジェクトには、パラメータをキーと値のペアとして格納します。
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>;
}
- 遷移先のコンポーネントで、
useLocationフックを使用してlocation.stateからパラメータにアクセスできます。 Linkコンポーネントのtoプロパティにオブジェクトを渡します。オブジェクトには、パスとstateキーを指定します。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 }} />;
}
注意
useParamsとuseLocationフックは、遷移先のコンポーネントでパラメータにアクセスするために使用されます。stateプロパティはブラウザの履歴に保存されるため、ページをリロードするとパラメータが失われます。永続的なパラメータが必要な場合は、URL パラメータを使用することを検討してください。
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 パラメータを使用する
- 例:
/path/to/page?id=123&name=John%20Doe - URL に直接パラメータを含めることができます。
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 にパラメータが含まれるため、ブラウザの履歴に保存されます。
reactjs react-router
