React Router v4で現在のルート情報を取得する2つの主要な方法

React Router v4で現在のルートを取得する方法

useLocation Hookは、現在のURLを表す location オブジェクトを取得するために使用できます。このオブジェクトには、pathname、search、hashなどのプロパティが含まれています。

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  // 現在のパス名を取得
  const pathname = location.pathname;

  // 現在の検索パラメータを取得
  const search = location.search;

  // 現在のハッシュを取得
  const hash = location.hash;

  return (
    <div>
      <h1>現在のパス名: {pathname}</h1>
      <h1>現在の検索パラメータ: {search}</h1>
      <h1>現在のハッシュ: {hash}</h1>
    </div>
  );
}

useHistory Hookは、ブラウザの履歴を操作するために使用できます。このHookを使用して、現在のURLを取得することもできます。

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  // 現在のURLを取得
  const location = history.location;

  // 現在のパス名を取得
  const pathname = location.pathname;

  // 現在の検索パラメータを取得
  const search = location.search;

  // 現在のハッシュを取得
  const hash = location.hash;

  return (
    <div>
      <h1>現在のパス名: {pathname}</h1>
      <h1>現在の検索パラメータ: {search}</h1>
      <h1>現在のハッシュ: {hash}</h1>
    </div>
  );
}

どちらの方法を使用しても、現在のルート情報を取得することができます。どちらの方法を使用するかは、あなたの好みやコードのスタイルによって異なります。

上記以外にも、location オブジェクトを直接取得したり、withRouter HOCを使用したりして、現在のルートを取得することができます。

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

function MyComponent() {
  const location = useLocation();

  // 現在のパス名を取得
  const pathname = location.pathname;

  return (
    <div>
      <h1>現在のパス名: {pathname}</h1>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={MyComponent} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

1. useLocation Hookをインポートします。
2. MyComponent 関数で、useLocation Hookを使用して location オブジェクトを取得します。
3. location オブジェクトから pathname プロパティを取得します。
4. pathname プロパティをレンダリングします。

このコードを実行すると、ブラウザのアドレスバーに表示されている現在のパス名が画面に表示されます。

React Router v4で現在のルートを取得するには、いくつかの方法があります。上記で紹介した方法を参考に、あなたのニーズに合った方法を選択してください。

React Router v4で現在のルートを取得するその他の方法

location オブジェクトを直接取得する

// 現在のパス名を取得
const pathname = window.location.pathname;

// 現在の検索パラメータを取得
const search = window.location.search;

// 現在のハッシュを取得
const hash = window.location.hash;

この方法は、シンプルでわかりやすいですが、テストコードを書くのが難しいという欠点があります。

withRouter HOCは、コンポーネントに location オブジェクトを渡すことができます。

import { withRouter } from 'react-router-dom';

const MyComponent = ({ location }) => {
  // 現在のパス名を取得
  const pathname = location.pathname;

  return (
    <div>
      <h1>現在のパス名: {pathname}</h1>
    </div>
  );
};

const MyComponentWithRouter = withRouter(MyComponent);

この方法は、テストコードを書くのが簡単ですが、コンポーネントツリー全体に withRouter HOCを伝播させる必要があるという欠点があります。

カスタム Hookを使用して、location オブジェクトを取得することができます。

import { useEffect, useState } from 'react';

function useLocation() {
  const [location, setLocation] = useState(window.location);

  useEffect(() => {
    const listener = () => setLocation(window.location);
    window.addEventListener('popstate', listener);
    return () => window.removeEventListener('popstate', listener);
  }, []);

  return location;
}

function MyComponent() {
  const location = useLocation();

  // 現在のパス名を取得
  const pathname = location.pathname;

  return (
    <div>
      <h1>現在のパス名: {pathname}</h1>
    </div>
  );
}