【React】react-router-domを使ったuseLocationの使用方法

useLocationを使うと、Linkやnavigateに指定した値を受け渡すことができる。
Linkを使う場合だと以下のような感じ。

<Link to={`${process.env.PUBLIC_URL}/test/`} state={{ hoge: 'moo', moge: true }}>テスト</Link>

useNavigateを使う場合だと以下のような感じ。

const navigate = useNavigate();

const handleLink = () => {
  navigate(`${process.env.PUBLIC_URL}/test/`,{state: { hoge: 'moo', moge: true } })
}

return (
  <div onClick={() => handleLink() }>テスト</div>
)

リンク先で値を使うときに、useLocationを使用する。

  const location = useLocation();

  type SelState = { hoge: string, moge: boolean }
  const selstate = location.state as SelState;

asを使って型を指定すること。