reactでURLの値を取得する方法

はじめに

ReactでURLのpathの値を取得をしたい場面があり、調べた内容を備忘録として残そうと思います。
以前URLからパラメータを取得する方法をまとめましたが、今回は'/'とその後に続くURLのpathの値を取得する方法をまとめます。

URLの値を取得

値を取得するにはreact-router-domからuseLocationをimportし、pathnameプロパティを使用します。
現在のURLのpathを取得して、pathによって表示する内容を変えたい場合の記述が下記になります。

//urlが"https://hoge.com/fuga1"か"https://hoge.com/fuga2"だった場合

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

const NameQuery: React.FC = () => {
  const pathname = useLocation().pathname;

  return(
   {pathname === (`/fuga1`) &&
    <>
     <p>fuga1のページです</p>
    </>
   }
   {pathname === (`/fuga2`) &&
    <>
     <p>fuga2のページです</p>
    </>
   }
  )
}

URLの"/"以降のpathを取得できるので、pathnameの変数は下記のようになります。

urlが"https://hoge.com/fuga1"の場合
⇨pathname = /fuga1

urlが"https://hoge.com/fuga2"の場合
⇨pathname = /fuga2

このように値を取得できるようになったので、useParamsを使ってpathからidを取得したりしようと思います。

参考