useRouter 在第一页加载时不起作用。 NextJS

Question

基本上，我有这两个页面，一个主页和一个仪表板。 每次加载主页时，我都想检查用户是否登录到应用程序。 如果用户已登录，他/她应该被重定向到仪表板。 据我所知，这段代码应该可以完成这项工作：

  const { auth } = useAuth();
  const router = useRouter();

  useEffect(() => {
    let mounted = true;
    if (auth != null && mounted) {
      console.log(auth);
      router.push("/dashboard");
    }
    return () => (mounted = false);
  }, []);

但是，上面的代码不适用于页面加载或页面刷新。 问题是我需要它来处理页面加载，并且该代码仅在发生快速刷新时才有效。 我将不胜感激有关如何解决此问题的任何建议。

Answer 1

正如评论中提到的，您需要将auth添加到useEffect的依赖数组中，以确保它在设置该变量时运行。

const { auth } = useAuth();
const router = useRouter();

useEffect(() => {
    let mounted = true;
    if (auth != null && mounted) {
      console.log(auth);
      router.push("/dashboard");
    }
    return () => (mounted = false);
}, [auth]);

Answer 2

不特定于 OP 的身份验证错误，但类似于标题。

我发现 useRouter 在刷新后无法处理页面加载，但如果开发环境在代码更改或用户使用链接导航到页面时执行后台刷新，它将起作用。

事实证明，您必须观察 useEffect 中的 router.query 属性以捕捉它何时更新并在 state 变量中设置该属性，或者在同一 useEffect 中执行页面加载代码。

  const [id, setID] = useState();
  const router = useRouter();

  // fire on load
  useEffect(() => {
    const { id } = router.query
    console.log(id); // won't be set on hard refresh
  }, []);

  // fire when router.query is updated
  useEffect(() => {
    const { id } = router.query
    setID(id);
  }, [router.query]);
  
  // this works with the second example useEffect, not the first
  return <div>{id}</div>;