[React+TS]ログイン判定→ルーティング処理を実装したルートページ

お疲れ様です。今回はシンプルな機能をまとめておこうと思います。
機能としては、

・初回レンダリング時のみログインチェック処理を実行
・ログインされていればログイン済みトップページへ
・未ログインならログインページへ

各ログイン確認処理等は個別で実装しておいてください。今回はそれらを使うルートページの処理のみ書いてます。

中身

import { Navigate } from "react-router-dom";
import useUserStore from "../../funcs/state/store/UserAuthStore";
import { useEffect, useState } from "react";

function HomePage() {
    const checkAuth = useUserStore((state) => state.checkAuth);
    const [isLogined, setLogined] = useState(false);
    const [isLoading, setLoading] = useState(true);

    useEffect(() => {
        const checkAuthentication = async () => {
            const result = checkAuth();
            setLogined(result);
            setLoading(false);
        };
        checkAuthentication();
    }, [checkAuth]);

    if (isLoading) {
        return <div>Loading...</div>;
    }

    return isLogined ? (
        <Navigate to="/dashboard" />
    ) : (
        <Navigate to="/auth/login" />
    );
}

export default HomePage;

useUserStoreにおいて、ログイン判定処理を実装しています。また、初回ロード→ログイン判定処理が終わるまではisLoading=true、ログインしていればisLogined=trueに変わります。