React Routerでlocationを取得するサンプル

6849 ワード
react-router React ReactRouter React テキストリンク

概要

  • とりあえず、window.location.pathname,searchを取得したい
    • とりあえず window.location.pathname を記述しても取得は可能
    • だが、きっとスマートな方法があるに違いないと思っている
  • 2021年時点でのReact初学者
  • 調べると、どうやらReactは歴史があり、時期によって推奨される記述方法やモジュールが変遷しているように感じている

（いつか古くなると思いつつ）一応取得できたので、メモしておこうと思います。

手順

実行環境

  • Windows10 + WSL2 + Ubuntu 20.04 + Node.js 16
$ cat /etc/issue
Ubuntu 20.04.2 LTS \n \l
$ node --version
v16.5.0

準備

Reactアプリケーション router-sample を作成し、React Routerモジュールをインストールします

$ npm install -g create-react-app
$ npx create-react-app router-sample
$ cd router-sample
$ npm install react-router-dom

モジュール類のバージョン確認

$ npm list
[email protected] (snip)../router-sample
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── [email protected] extraneous
├── [email protected] extraneous
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

サンプルソース

src/App.js
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  useLocation
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Route>
        <Sample />
      </Route>
    </Router>
  );
}

function Sample() {
  const {
    pathname,
    search
  } = useLocation();
  return (
    <>
      <p><a href="/test/link?a=1&b=2">test link1</a></p>
      <p><a href="/go/?a=xyz">test link2</a></p>
      <p>location.pathname:{pathname}</p>
      <p>location.search:{search}</p>
      <p>window.location.pathname:{window.location.pathname}</p>
      <p>window.location.search:{window.location.search}</p>
    </>
  )
}

実行

$ npm start

Webブラウザで確認します

  • test link1 、 test link2 それぞれをクリックして、pathname、searchの値が変化することを確認します

メモ

使える場所

<Router> <Route> で囲まれた部分で useLocation() を使用できるようです。そうでない場合は下記のようなエラーが発生します。
useParams() や useHistory() も同様です。

TypeError: Cannot read property 'location' of undefined

本来の使い方？

<Route path="/funcname"> のように記述して、パスによって要素を切り替えて利用するのが本来かもしれません。