useRouter 在第一页加载时不起作用。下一个JS

Question

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

  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的auth错误，但与标题类似。

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

事实证明，您必须在 useEffect 中观察 router.query 属性才能在更新时捕获并在状态变量中设置属性或执行 page-load 同一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>;

useRouter 在第一页加载时不起作用。下一个JS

useRouter doesn't work on first page load. NextJS

routes

reactjs

next.js

react-hooks