React导航栏路由无法随Redux登录状态动态更新问题求助

你的问题核心是useEffect的依赖数组设置不合理，导致Redux状态变化时无法触发路由更新。当前用整个props作为依赖，React对对象做浅比较，只要props的引用没变化，哪怕内部userInfo更新了，也不会重新执行effect。

修复方案： #

• 精准设置依赖项：把依赖数组从[props]改成[props.userInfo?.isLoggedIn]，直接监听登录状态这个具体值的变化：

  useEffect(() => {
    getUserInfo();
    console.log(props.userInfo?.isLoggedIn)
    if (props?.userInfo?.isLoggedIn) {
      setUserState(['profile','dashboard','wallet']);
    } else {
      setUserState(['sign-in','sign-in','sign-in']);
    }
  }, [props.userInfo?.isLoggedIn]) // 改为监听具体的登录状态值
  

• 更可靠的方式：直接用useSelector获取Redux状态：
  跳过props传递，直接在组件里用useSelector监听登录状态，能更精准感知Redux的变化，避免props传递带来的依赖判断问题：

  import { useSelector } from 'react-redux';
  
  // 组件内部
  const isLoggedIn = useSelector(state => state.user?.userInfo?.isLoggedIn);
  
  useEffect(() => {
    getUserInfo();
    console.log(isLoggedIn)
    if (isLoggedIn) {
      setUserState(['profile','dashboard','wallet']);
    } else {
      setUserState(['sign-in','sign-in','sign-in']);
    }
  }, [isLoggedIn]) // 直接监听登录状态变量
  

额外检查点： #

• 确认getUserInfo函数内部正确dispatch了更新Redux状态的action，确保userInfo.isLoggedIn会在登录/登出时真实改变。
• 如果getUserInfo是用于初始化状态的请求，可加条件判断只在组件挂载时调用一次，避免重复请求。

内容的提问来源于stack exchange，提问作者islam gueniari