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();
    });
}

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

簡単な説明

useEffectを使ってレンダリングが完了した時点で実行しないと、正常にasPathから取得できません。

これの理由が全くわかってないので誰か詳しい人いたら教えてください。

また、URLが直に書き換えられた場合router.events.on("hashChangeStart", ()=>{})ではなぜかイベントが発火しません。ここも理由がよくわかりません。

なのでwindow.addEventListenerを用いて関数を発火させています。

クライアントサイドでのみ定義されるwindowオブジェクトをNext.jsで操作していいのかもよく理解できていません。

今回はリダイレクトなので簡単な処理ですが、スクロールを実装したい場合はuseStateと併用するといいと思います。

終わり

非常に短いですが、これで終わりです。内容があまり無いようです。

コメント

タイトルとURLをコピーしました