带有React的Ionicapp-处理验证状态和开关路线（历史未定义）

Question

我正在开发离子应用程序（带有React）。我设置authcontext：

import React, {createContext, useEffect, useState} from "react";
import {storageService} from 'src/services/StorageService';

const AuthContext = createContext({
    isLoggedIn: false,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    setAuthState: (value: boolean) => {},
});

const AuthContextProvider = (props: any) => {
    const setAuthState = async (isLoggedIn: boolean) => {
        setState({...state, isLoggedIn: isLoggedIn})

        isLoggedIn ? await storageService.setAuthenticated() : await storageService.clearAuth();
    }

    const initState = {
        isLoggedIn: false,
        setAuthState: setAuthState
    }

    const [state, setState] = useState(initState);

    const checkAuth = async () => {
        const isAuthenticated = await storageService.isAuthenticated();
        setState({...state, isLoggedIn: isAuthenticated})
    }

    useEffect(() => {
        checkAuth();
    }, []);

    return (
        <AuthContext.Provider value={state}>
            {props.children}
        </AuthContext.Provider>
    )
}

export { AuthContext, AuthContextProvider };

其中storageservice是：

import { Storage } from '@capacitor/storage';

class StorageService {
    async isAuthenticated(): Promise<boolean> {
        const { value } = await Storage.get({ key: 'isAuthenticated' });
        return !!value && value === 'true';
    }

   async setAuthenticated() {
       await Storage.set({
           key: 'isAuthenticated',
           value: 'true',
       });
    }

    async clearAuth() {
        await Storage.remove({ key: 'isAuthenticated' });
    }
}

export const storageService = new StorageService();

如何动态设置路由？要在/登录路由上强制应用程序，直到登录，否则导航到/（即主页）。我尝试在主应用程序中使用使用效果，在该文件中我从AuthContext收听了isloggedin，并尝试使用history（use History Hook）> ，但它是未定义的。那么，在离子/反应中更改路线和处理AUTH状态的最佳方法是什么？