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