ReactアプリでURLのパスを取得する方法について解説します。
React Routerを使うと、現在のURLを簡単に取得でき、それを使ってアプリの挙動を制御できます。
URLを取得する基本的な方法
useLocation フックを利用
React RouterのuseLocation
フックを使って、現在のURLを取得できます。以下のように簡単に実装可能です。
import { useLocation } from 'react-router-dom';
function MyComponent() {
const location = useLocation();
return <p>Current URL: {location.pathname}</p>;
}
JavaScript上記のコードでは、location.pathname
を使って現在のURLパスを取得し、それを画面に表示しています。
generatePath()を利用してURLを動的に生成
URLのパスに動的なパラメータを挿入する場合、generatePath()
を使用します。例えば、ユーザーIDを含むURLを生成する方法です。
import { generatePath } from 'react-router-dom';
function MyComponent() {
const userId = 123;
const path = generatePath("/users/:id", { id: userId });
return <p>Generated Path: {path}</p>;
}
JavaScriptこの例では、/users/:id
のURLパスに動的にユーザーIDを挿入し、/users/123
を生成しています。
URL取得とページ遷移の組み合わせ
URL取得は、ページ遷移と組み合わせて使用することが多いです。
例えば、特定のページに遷移する際に現在のURLを取得して、別のロジックに利用するケースです。
import { useHistory } from 'react-router-dom';
function NavigationExample() {
const history = useHistory();
const handleClick = () => {
history.push('/new-page');
};
return (
<div>
<button onClick={handleClick}>Go to new page</button>
</div>
);
}
JavaScriptこのように、useHistory
を使用して、ユーザーがクリックした際に新しいURLに遷移する処理を実装できます。
コメント