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

【问题标题】：useRouter doesn't work on first page load. NextJSuseRouter 在第一页加载时不起作用。 NextJS
【发布时间】：2021-06-19 10:17:28
【问题描述】：

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

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

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

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

【问题讨论】：

您可能希望将auth 添加到useEffect 的依赖数组中，以确保它在设置该变量时运行。最有可能的情况是首次加载时 auth 尚未设置，这意味着 router.push 不会发生。此外，您可能应该删除 mounted 变量。
谢谢！将auth 添加到依赖数组中解决了这个问题。我不确定删除 mounted 是否是一个明智的主意，因为我在添加它之前收到了警告。

标签： reactjs routes react-hooks next.js

【解决方案1】：

如 cmets 中所述，您需要将 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]);

【讨论】：

【解决方案2】：

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

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

事实证明，您必须观察 useEffect 中的 router.query 属性，以捕捉它何时更新并在状态变量中设置该属性或在同一 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>;

【讨论】：