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

Question

Basically, I have these two pages, a homepage and a dashboard. Every time the homepage is loaded I want to check if the user is logged in to the app. If the user is logged, he/she should be redirected to the dashboard. As far as I know, this code should do the job:

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

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

However, the code above doesn't work on page load nor page refresh. The problem is that I need it to work on page load, and that code only works when a fast refresh occurs. I would appreciate any suggestion on how to work this out.

Answer 1

As mentioned in the comments, you'll need to add auth to the useEffect 's dependency array to ensure it runs when that variable is set.

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

Not specific to the OP's auth error, but similar to the title.

I found that useRouter wasn't working on page load after a refresh, but it would work if the development environment performed a background refresh when code changed or when the user navigated to the page using Links.

It turns out you have to watch the router.query property in a useEffect to catch when it updates and set the property in a state variable or execute the page-load code within the same 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>;