【Next.js】URLの直打ちとページリロードを防ぐ方法

Next.jsで同じサイト内のボタンとかリンクを押して遷移するのはOKでもURLを直打ちやページのリロードは防ぎたいことがあったのでその方法です。

ちょっと強引です。

before.tsx

import { useRouter } from "next/router";

const Before = () => {
  const router = useRouter();
  
  const goAfter = () => {
    localStorage.setItem('display', 'ok');
    router.push('/after');
  }

  return (
    <>
      <h1>Before</h1>
      <button onClick={goAfter}>Afterに移動</button>
    </>
  );
}

export default Before;

after.tsx

import { useRouter } from "next/router";
import { useEffect } from "react";

const After = () => {
  const router = useRouter();

  useEffect(() => {
    if (localStorage.getItem('display') != 'ok') {
      router.push('/before');
    }
    localStorage.removeItem('display');
  }, []);

  return (
    <h1>After</h1>
    );
  }

export default After;

before.tsxのボタン「Afterに移動」をクリックするとページ遷移しますが、遷移する前にlocalStorageに値「display」を保存し、

after.tsxではuseEffectでlocalStorageの「display」の値をチェックして値がなかったり異なっていたらbeforeに遷移して、

値があった場合はその直後にlocalStorageから「display」を削除してページのリロードやURL直打ちを防いでいます。

ただ、useEffectは画面が描画された後で実行されるので一瞬afterが表示された後にbeforeに遷移するのであまりスマートではないです。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです!
にほんブログ村 IT技術ブログへ
にほんブログ村