Next.jsでハッシュフラグでリダイレクトする

こんにちは、山田ハヤオです。大学が忙しくてブログを更新できません。ごめんなさい。

久しぶりの投稿ですが、今回はフロントエンドの話です。

最近自分のホームページをNext.jsで書き直しています。以前のウェブサイトではBootstrapを用いて1つのHTMLに色々書いて、URLに#をつけて移動していました。

今回Reactで書き直すに当たって旧サイトからリダイレクトを実装する必要があるんですが、Next.jsでURLの#を取得するのに少し苦労したのでそのメモです。

結論
簡単な説明
終わり

結論

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

export default function Test(){
    const router = useRouter()

    useEffect(() => {
        // 実際の処理
        const checkHashFlag = () => {
            const hashflag = router.asPath.split("#")[1];
            // ハッシュフラグが存在する場合の処理
            if (hashflag) {
                switch (hashflag.toLowerCase()) {
                    case "gyagu":
                        router.replace("/gyagu");
                }
            }
        };

        // URLが直に書き換えられたときにイベントを発火
        if (typeof window == "object") {
            window.addEventListener("hashchange", checkHashFlag);
        }

        // ウィンドウのレンダリング完了時に発火
        checkHashFlag();
    });
}

結論だけ言うとこんな感じです。