Reactでプログラム側から画面を遷移させる

2023.05.22 08:00
2023.05.08 09:40
Reactでプログラム側から画面を遷移させる

Reactでの画面遷移についてメモしてみました。

通常Reactでの画面遷移は<Link>タグで生成したリンクをクリックして遷移することになるみたいですが、今回はタグをクリックしての遷移ではなく、プログラムから動的に遷移させる方法を試してみました。

遷移にはuseNavigateを使うみたいですね。
ボタンを押した時に遷移するパターンを作ってみたいと思います。

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

export const Page: React.FC = () => {
  const navigate = useNavigate();

  // 検索ボタンを押された時
  const submit = () => {
    navigate("/page2");
  };

  return (
    <>
      <button onClick={submit}>画面遷移する</button>
    </>
  );
}

buttonをクリックするとsubmit関数が発火して「navigate」を使って「page2」へ画面遷移するって感じですね。

今回は以上です！