Javascript 我对react导航身份验证流有问题

我有一个登录页面，如果没有登录它现在显示的问题是，当有一个令牌，它显示登录页面一秒钟，然后再进入主页，我如何才能阻止它这样做

我正在使用useLayoutEffect并尝试从friebase和asyncStorge中获取令牌，从而允许一个deley

export default function Navigation() {
  const [userToken, setUserToken] = useState(null);
  // const Token = useSelector((store) => store.userState.userToken);
  const isDarkTheme = useSelector((store) => store.themeState.Theme);
  const dispatch = useDispatch();

  useLayoutEffect(() => {
    let mounted = true;
    firebase.auth().onAuthStateChanged((user) => {
      if (mounted) {
        if (user) {
          setUserToken(JSON.stringify(user.uid));
        } else {
          setUserToken(null);
        }
      }
    });
    dispatch(getTheme());
    // dispatch(getToken());
    return function cleanup() {
      mounted = false;
    };
  }, [userToken]);

  const theme = isDarkTheme ? CustumDarkTheme : CustumDefaultTheme;

  const Stack = createStackNavigator();
  return (
    <Provider theme={theme}>
      <NavigationContainer theme={theme}>
        {userToken ? (
          <Stack.Navigator screenOptions={{ headerTitle: (props) => <Header {...props} /> }}>
            <Stack.Screen name="Home" component={TabNavigation} />
            <Stack.Screen
              name="Profile"
              component={Profile}
              options={({}) => ({
                gestureEnabled: true,
                cardOverlayEnabled: true,
                ...TransitionPresets.ModalPresentationIOS,
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="PatientDetails"
              component={PatientDetails}
              options={({}) => ({
                gestureEnabled: true,
                cardOverlayEnabled: true,
                ...TransitionPresets.ModalPresentationIOS,
                headerShown: false,
              })}
            />
          </Stack.Navigator>
        ) : (
          <Stack.Navigator initialRouteName="Start" screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Start" component={Start} />
            <Stack.Screen name="LogIn" component={LogIn} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        )}
      </NavigationContainer>
    </Provider>
  );
}

导出默认函数导航（）{
const[userToken，setUserToken]=useState（null）；
//const-Token=useSelector（（store）=>store.userState.userToken）；
const isDarkTheme=useSelector（（store）=>store.themstate.Theme）；
const dispatch=usedpatch（）；
useLayoutEffect（（）=>{
让我们假设这是真的；
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（已安装）{
如果（用户）{
setUserToken（JSON.stringify（user.uid））；
}否则{
setUserToken（null）；
}
}
});
调度（getTheme（））；
//调度（getToken（））；
返回函数cleanup（）{
安装=错误；
};
}，[userToken]）；
constTheme=isDarkTheme？CustumDarkTheme:custumdaultTheme；
const Stack=createStackNavigator（）；
返回(
{userToken(
}}>
({
已启用手势：true，
卡德：没错，
…TransitionPresets.ModalPresentationIOS，
校长：错，
})}
/>
({
已启用手势：true，
卡德：没错，
…TransitionPresets.ModalPresentationIOS，
校长：错，
})}
/>
) : (
)}
);
}

您可以添加加载状态并显示某些内容，直到获得令牌

const [loading, setLoading] = useEffect(true)

useEffect(()=>{if(userToken){setLoading(false)}},[userToken]

return (
    {loading?<LOADING INDICATION>:{userToken?ect}}
)

const[loading，setLoading]=useffect（true）
useffect（（）=>{if（userToken）{setLoading（false）}}，[userToken]
返回(
{正在加载？：{userToken？ect}
)