React Hooksを使っている場合の画面遷移

Tweet

Pocket

ReactでHooksを使って開発をしている中で気が付いた点のメモです。

ページ間で共通で利用するステートをuseContextで受け渡す処理を追加したのですが、その時にあまり何も考えず、画面遷移にaタグを使用して遷移するように書いたのですが、それだとステートがクリアされてしまいます。

react-router-domのLink toを使うか、useNavigateを使うことでステートの値を保持したまま、画面の切り替えをすることができるようになります。useContext自体のサンプルは別の機会に書くとして、画面遷移部分のみ簡単にサンプルを書いておきます。

Link toを使用するイメージ

import { Link } from "react-router-dom";

const Sample = () => {
  return (
    <div><Link to="/">リンク</Link></div>
  )
}

useNavigateを使用するときのイメージ

import { useNavigate } from "react-router-dom";

const Sample = () => {
  const navigate = useNavigate();

  const sampleSubmit = () => {
    navigate("/");
  }

  return (
    <form onSubmit={sampleSubmit}>
      <button>ボタン</button>
    </form>
  )
}

Tweet

Pocket