React Router v6でLinkコンポーネントにpropsを渡す方法
React RouterでLinkにpropsを渡す方法
React Router v6では、Linkコンポーネントにpropsを渡すことで、遷移先のコンポーネントに情報を渡すことができます。これは、さまざまな情報を動的に表示したり、コンポーネント間のデータ共有を実現したりする際に役立ちます。
方法
Linkコンポーネントにpropsを渡す方法はいくつかあります。
- toプロパティ
toプロパティは、遷移先のパスを指定します。オブジェクト形式で渡すことで、propsキーにpropsを指定できます。
<Link to={{
pathname: "/about",
props: {
userId: 123,
},
}}>About</Link>
- stateプロパティ
stateプロパティは、遷移時に一時的に保存したいデータを格納します。遷移先のコンポーネントでは、useLocationフックを使用してstateプロパティにアクセスできます。
<Link to="/about" state={{ userId: 123 }}>About</Link>
遷移先のコンポーネントでpropsを受け取る
遷移先のコンポーネントでは、useParamsフックまたはuseLocationフックを使用して、渡されたpropsを受け取ることができます。
- useParamsフック
useParamsフックは、toプロパティのパスパラメータにアクセスするためのフックです。
const { userId } = useParams();
// userId を使用してコンポーネントをレンダリング
- useLocationフック
useLocationフックは、現在のURLと状態情報にアクセスするためのフックです。
const { state } = useLocation();
// state.userId を使用してコンポーネントをレンダリング
注意事項
toプロパティでオブジェクト形式を使用する場合は、必ずpropsキーを指定する必要があります。stateプロパティは、遷移時に一時的に保存されるデータのみ格納する必要があります。永続的に保存したいデータは、propsやコンポーネントの状態に格納する必要があります。
import React from "react";
import { Link } from "react-router-dom";
const App = () => {
return (
<div>
<h1>Home</h1>
<Link to="/about" state={{ userId: 123 }}>About</Link>
</div>
);
};
const About = () => {
const { userId } = useParams();
return (
<div>
<h1>About</h1>
<p>User ID: {userId}</p>
</div>
);
};
export default App;
このコードでは、HomeコンポーネントのLinkコンポーネントにstateプロパティを使用してuserIdを props として渡しています。
Aboutコンポーネントでは、useParamsフックを使用してuserIdを受け取り、表示しています。
このサンプルコードは基本的な例です。Linkコンポーネントに渡せるpropsは、toプロパティとstateプロパティ以外にも多数あります。詳細は、React Router v6ドキュメントを参照してください。
他の方法
- renderプロパティ
renderプロパティは、レンダリング関数を渡すことで、リンクを動的に生成することができます。この関数内で、propsを渡したいコンポーネントをレンダリングできます。
<Link to="/about" render={({ location }) => (
<MyLink
to={location.pathname}
userId={123}
/>
)}>About</Link>
- componentプロパティ
componentプロパティは、直接コンポーネントを渡すことで、リンクを生成することができます。このコンポーネントにpropsを渡すことができます。
<Link to="/about" component={MyLink} props={{ userId: 123 }}>About</Link>
Linkコンポーネントにpropsを渡す方法はいくつかあります。どの方法を選択するかは、状況によって異なります。
- シンプルな方法でpropsを渡したい場合は、
toプロパティのpropsキーを使用する。 - 動的にリンクを生成したい場合は、
renderプロパティを使用する。 - 特定のコンポーネントにpropsを渡したい場合は、
componentプロパティを使用する。
それぞれの方法のメリットとデメリットを理解して、適切な方法を選択してください。
javascript reactjs react-router
