こんにちは！ 株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「useLocation フックを使ったナビゲーション」についてお伝えしていきます。

ReactJSアプリケーションを開発するとき、ナビゲーションは不可欠な要素です。

ユーザーが別のページやビューに移動し、現在のURLにアクセスする必要があります。

useLocationフックの基本

React Router DOMを使用すると、現在の場所情報にアクセスするためにuseLocationフックを活用できます。

このフックを使うことで、現在のURLに関する情報を取得でき、それを活用してナビゲーションを行えます。

useLocationフックの使い方

下記は、useLocationフックの使い方です。

import React from "react";
import { BrowserRouter as Router, Route, Link, Switch, useLocation } from "react-router-dom";

const Home = () => {
  const location = useLocation();
  console.log(location);
  return (
    <div>
      <h3>ようこそ、ホームページへ！</h3>
      <h1>ホームページ {location.pathname}</h1>
      <p>現在のパス: {location.pathname}</p>
      <p>検索パラメータ: {location.search}</p>
    </div>
  );
};

// 他のコンポーネントの定義...

const App = () => {
  return (
    <Router>
      <nav style={{ display: "flex", gap: "20px" }}>
        <Link to="/home">ホーム</Link>
        <Link to="/about">紹介</Link>
        <Link to="/contact">お問い合わせ</Link>
      </nav>

      <Switch>
        <Route exact path="/home" component={Home} />
        {/* 他のルートの定義... */}
      </Switch>
    </Router>
  );
};

export default App;

このコードでは、useLocationフックを使用して現在の場所情報にアクセスし、それをコンポーネント内で表示しています。

例えば、location.pathnameを通じて現在のパスやlocation.searchを通じて検索パラメータを表示できます。

ベストプラクティス

適切なコンポーネント内で使用

useLocationフックを使用する際には、適切なコンポーネント内で使用してください。

React Routerでラップされたコンポーネント内で利用されます。

過度な使用を避ける

このフックは非常に強力ですが、過度に使用することは避けましょう。

useLocationフックを使用して情報を収集し、必要に応じて他のコンポーネントに渡すことを検討してください。

パフォーマンスを意識

特に深くネストされたコンポーネント内でuseLocationフックを使用する場合、パフォーマンスの問題に注意してください。

必要であれば再レンダリングの最適化を行うことが重要です。

結論

React Router DOMのuseLocationフックを理解することは、ReactJSアプリケーション内のナビゲーションを管理するための重要です。

このフックを活用することで、動的で応答性の高いWebアプリケーションを構築できます。