React Router v5 & v6でコンポーネントにパラメータを渡す方法
React Routerでコンポーネントにパラメータを渡す方法
ここでは、React Router v5とv6における、コンポーネントへのパラメータの渡し方を、分かりやすく説明します。
URLパラメータとRouteコンポーネント
まず、URLパラメータとは、URLの一部にキーと値のペアを付加して、情報を渡す方法です。例えば、以下のようなURLの場合、userIdというキーで、値123が渡されています。
https://example.com/users/123
React Routerでは、Routeコンポーネントを使って、URLパターンと表示するコンポーネントを定義します。このとき、URLパターンにコロン(:)を付加することで、URLパラメータを指定することができます。
<Route path="/users/:userId" component={UserDetail} />
上記の例では、/users/:userIdというURLパターンに一致した場合、UserDetailコンポーネントが表示されます。このとき、:userIdの部分はURLパラメータとして扱われ、UserDetailコンポーネントにpropsとして渡されます。
コンポーネントでパラメータを受け取る
UserDetailコンポーネント側では、propsを使って、渡されたパラメータを受け取ることができます。
const UserDetail = ({ userId }) => {
return (
<div>
<h1>ユーザー詳細</h1>
<p>ユーザーID: {userId}</p>
</div>
);
};
上記の例では、userIdというpropsが渡されているので、それを<h1>タグやpタグを使って表示することができます。
useNavigateフックを使って、パラメータ付きで別のコンポーネントに遷移することもできます。
const handleClick = () => {
const userId = 123;
useNavigate(`/users/${userId}`);
};
上記の例では、handleClick関数が呼び出されたときに、/users/123というURLに遷移します。このとき、userIdというパラメータが渡されます。
React Router v6では、いくつかの点が変更されています。特に、パラメータの扱い方において、以下の点が変更されています。
useParamsフックを使って、URLパラメータを取得するようになりました。Routeコンポーネントのcomponentプロパティが廃止され、代わりにelementプロパティが使われるようになりました。
これらの変更点を反映した例を以下に示します。
import { useParams } from 'react-router-dom';
const UserDetail = () => {
const { userId } = useParams();
return (
<div>
<h1>ユーザー詳細</h1>
<p>ユーザーID: {userId}</p>
</div>
);
};
<Route path="/users/:userId" element={<UserDetail />} />
まとめ
React Routerを使って、コンポーネント間でデータをやり取りすることは、非常に便利です。URLパラメータを使ってコンポーネントに値を渡す方法は、その中でもよく使われるテクニックです。
React Routerでコンポーネントにパラメータを渡す：サンプルコード
コンポーネント
// UserDetail.js
import React from 'react';
import { useParams } from 'react-router-dom';
const UserDetail = () => {
const { userId } = useParams();
return (
<div>
<h1>ユーザー詳細</h1>
<p>ユーザーID: {userId}</p>
</div>
);
};
export default UserDetail;
ルーティング
// App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import UserDetail from './UserDetail';
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/users/:userId" element={<UserDetail />} />
</Routes>
</BrowserRouter>
);
};
export default App;
遷移
// OtherComponent.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
const OtherComponent = () => {
const navigate = useNavigate();
const handleClick = () => {
const userId = 123;
navigate(`/users/${userId}`);
};
return (
<button onClick={handleClick}>ユーザー詳細へ</button>
);
};
export default OtherComponent;
このコードでは、以下のことが行われています。
UserDetailコンポーネントは、useParamsフックを使ってURLパラメータを取得しています。Appコンポーネントは、/users/:userIdというURLパターンに一致した場合、UserDetailコンポーネントを表示します。OtherComponentコンポーネントは、useNavigateフックを使って、/users/123というURLに遷移します。
- このサンプルコードは、React Router v6を使用しています。React Router v5を使用している場合は、一部のコードを変更する必要があります。
- このサンプルコードは、基本的な例です。より複雑なパラメータの渡し方については、React Routerのドキュメントを参照してください。
React Routerでコンポーネントにパラメータを渡す方法：その他
URLパラメータ
前述の通り、URLパラメータは最も一般的でよく使われる方法です。利点としては、シンプルで分かりやすいという点が挙げられます。
URLパラメータと同様に、URLの一部にキーと値のペアを付加して情報を渡すことができます。ただし、クエリパラメータは主に、フィルタリングやソートなどの情報を渡す場合に使用されます。
<Route path="/users" component={UserList} />
const UserList = () => {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const keyword = searchParams.get('keyword');
return (
<div>
<h1>ユーザー一覧</h1>
{/* ... */}
</div>
);
};
Context
コンポーネントツリー全体で共有したいデータを渡す場合、Contextを使うことができます。Contextは、グローバルな変数のような役割を果たし、コンポーネント間でデータを簡単に共有することができます。
const UserContext = React.createContext({
userId: null,
});
const App = () => {
const [userId, setUserId] = React.useState(123);
return (
<UserContext.Provider value={{ userId, setUserId }}>
<Routes>
<Route path="/users/:userId" element={<UserDetail />} />
</Routes>
</UserContext.Provider>
);
};
const UserDetail = () => {
const { userId } = React.useContext(UserContext);
return (
<div>
<h1>ユーザー詳細</h1>
<p>ユーザーID: {userId}</p>
</div>
);
};
Reduxは、アプリケーションのステートを管理するためのライブラリです。複雑なアプリケーションでは、Reduxを使ってステートを管理することで、コードをより分かりやすく、保守しやすくすることができます。
const store = createStore(reducer);
const UserDetail = () => {
const userId = useSelector((state) => state.user.id);
return (
<div>
<h1>ユーザー詳細</h1>
<p>ユーザーID: {userId}</p>
</div>
);
};
- シンプルで分かりやすい方法が必要な場合は、URLパラメータがおすすめです。
- フィルタリングやソートなどの情報を渡す場合は、クエリパラメータがおすすめです。
- コンポーネントツリー全体で共有したいデータを渡す場合は、Contextがおすすめです。
- 複雑なアプリケーションでは、Reduxを使うことを検討しましょう。
React Routerでコンポーネントにパラメータを渡す方法は、いくつかあります。それぞれの方法の利点と欠点を理解した上で、状況に合った方法を選択することが重要です。
reactjs react-router
