React Routerでカスタムフックを使ってオプションのパスパラメータを取得する方法
React Routerにおけるオプションのパスパラメータ
React Routerは、Reactアプリケーションにおけるルーティングを管理するためのライブラリです。オプションのパスパラメータを使用すると、URLに動的な値を含めることができます。これは、さまざまなページやコンポーネントにアクセスするために便利です。
例えば、ユーザーの詳細を表示するページがあるとしましょう。このページにアクセスするには、ユーザーIDをURLに含める必要があります。これは、次のようなパスを使用できます。
/user/:userId
この場合、userIdはオプションのパスパラメータです。つまり、URLに含める必要はありません。
オプションのパスパラメータを使用するには、useParamsフックを使用する必要があります。このフックは、現在のURLのパスパラメータにアクセスするために使用できます。
import { useParams } from "react-router-dom";
const UserPage = () => {
const { userId } = useParams();
return (
<div>
<h1>ユーザーID: {userId}</h1>
</div>
);
};
この例では、useParamsフックを使用して、userIdパスパラメータを取得しています。
デフォルト値
オプションのパスパラメータにデフォルト値を設定できます。これは、パラメータがURLに含まれていない場合に役立ちます。
const UserPage = () => {
const { userId = 1 } = useParams();
return (
<div>
<h1>ユーザーID: {userId}</h1>
</div>
);
};
この例では、userIdパラメータがURLに含まれていない場合は、デフォルト値1が使用されます。
複数のオプションパラメータを使用できます。
/user/:userId/:postId
この場合、userIdとpostIdはオプションのパスパラメータです。
オプションのパスパラメータは、React RouterでURLに動的な値を含めるための便利な機能です。useParamsフックを使用して、パスパラメータにアクセスできます。
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => {
return (
<Router>
<Switch>
<Route path="/user/:userId" component={UserPage} />
<Route path="/" component={HomePage} />
</Switch>
</Router>
);
};
const UserPage = ({ match }) => {
const { userId } = match.params;
return (
<div>
<h1>ユーザーID: {userId}</h1>
</div>
);
};
const HomePage = () => {
return (
<div>
<h1>ホームページ</h1>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
このコードは、次の2つのページを提供します。
/user/:userId: ユーザーIDを表示するページ/: ホームページ
URLにuserIdパラメータが含まれている場合、UserPageコンポーネントが表示されます。パラメータはmatch.paramsオブジェクトから取得できます。
URLにuserIdパラメータが含まれていない場合、HomePageコンポーネントが表示されます。
このコードは基本的な例です。オプションのパスパラメータを使用して、より複雑なアプリケーションを作成できます。
- パスパラメータを使用して、データを取得するためにAPIを呼び出すことができます。
- パスパラメータを使用して、コンポーネントに異なるプロパティを渡すことができます。
詳細については、React Routerのドキュメントを参照してください。
オプションのパスパラメータを使用する他の方法
matchオブジェクトは、Routeコンポーネントに渡される props オブジェクトのプロパティです。このオブジェクトには、現在のURLに関する情報が含まれています。
const UserPage = ({ match }) => {
const { userId } = match.params;
return (
<div>
<h1>ユーザーID: {userId}</h1>
</div>
);
};
useLocationフックは、現在のURLに関する情報を取得するために使用できます。
import { useLocation } from "react-router-dom";
const UserPage = () => {
const location = useLocation();
const { userId } = location.pathname.match(/\/user\/(\d+)/);
return (
<div>
<h1>ユーザーID: {userId}</h1>
</div>
);
};
この例では、useLocationフックを使用して、現在のURLを取得しています。その後、正規表現を使用してuserIdパラメータを抽出しています。
カスタムフックを作成して、オプションのパスパラメータを取得できます。
import { useEffect, useState } from "react";
const useOptionalParam = (paramName) => {
const [paramValue, setParamValue] = useState(null);
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const value = params.get(paramName);
setParamValue(value);
}, []);
return paramValue;
};
const UserPage = () => {
const userId = useOptionalParam("userId");
return (
<div>
<h1>ユーザーID: {userId}</h1>
</div>
);
};
この例では、useOptionalParamというカスタムフックを作成しています。このフックは、paramNameパラメータの値を取得し、useStateフックを使用して状態として保持します。
オプションのパスパラメータを使用する方法はいくつかあります。どの方法を使用するかは、アプリケーションのニーズによって異なります。
javascript reactjs react-router
