【React】react-router-dom にて画面を更新・リセットする方法

問題

react-router-domの navigate の画面遷移を用いて、今開いている画面を更新したい。

方法

navigate の引数を"0"にする。

Page.tsx

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

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

  const refreshPage = () => {
    navigate(0);// 画面更新
  };

  // 省略
};

これで、画面更新をすることができます。

また、"1" を指定すると、一つ先に進み、"-1"を指定すると、一つ前に戻すこともできます。

Page.tsx

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

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

  const goBack = () => {
    navigate(-1);// 一つ前に戻る
  };

  // 省略
};

以上です。