Reactjs 如何使用react钩子和redux设置私有路由？

我正在使用React钩子和Redux设置一个私有路由。但是，

isAuthenticated

状态的更改未在

PrivateRoute

组件中注册。然而，在我的Redux开发工具中，

isAuthenticated

切换为true

const PrivateRoute = ({ component: Component, ...rest }) => {
  const authStatus = useSelector((state) => state.user.isAuthenticated);

  useEffect(() => {
    console.log(authStatus);
  }, [authStatus]);

  return (
    // Show the component only when the user is logged in
    // Otherwise, redirect the user to /signin page
    <Route
      {...rest}
      render={(props) =>
        authStatus ? <Component {...props} /> : <Redirect to="/join" />
      }
    />
  );
};

export default PrivateRoute;

const PrivateRoute=（{component:component，…rest}）=>{
const authStatus=useSelector（（state）=>state.user.isAuthenticated）；
useffect（（）=>{
console.log（authStatus）；
}，[authStatus]）；
返回(
//仅当用户登录时显示组件
//否则，将用户重定向到/登录页面
身份证？：
}
/>
);
};
导出默认私有路由；

结果是我没有将auth作为道具传递。因此，未注册存储中的更新。请参阅修复程序：

function AuthStatus() {
  const auth = useSelector((state) => state.user.isAuthenticated);
  return auth;
}


const PrivateRoute = ({ component: Component, auth = AuthStatus, ...rest }) => {


  return (
    // Show the component only when the user is logged in
    // Otherwise, redirect the user to /signin page
    <Route
      {...rest}
      render={(props) =>
        auth ? <Component {...props} /> : <Redirect to="/join" />
      }
    />
  );
};

export default PrivateRoute;

函数AuthStatus（）{
const auth=useSelector（（state）=>state.user.isAuthenticated）；
返回auth；
}
const privaterout=（{component:component，auth=AuthStatus，…rest}）=>{
返回(
//仅当用户登录时显示组件
//否则，将用户重定向到/登录页面
认证？：
}
/>
);
};
导出默认私有路由；

何时在redux中填充isAuthenticated。它可以是这样，你的价值是使用之前，它甚至是ready@ShubhamKhatri我真的认为是这样。如何等待值可用？在减速机中也添加加载状态