Next.js中pages/index.js内Router.push跳转后页面空白问题求助

问题原因 #

你的Home组件在用户认证状态（status === "authenticated"）分支下没有返回任何React元素，直接调用router.push。React要求组件必须返回一个合法的JSX节点（或null），这种情况下会触发渲染错误，导致跳转后页面空白。刷新/dashboard/users时直接加载目标页面，绕开了Home组件的错误逻辑，所以显示正常。

修复方案 #

方案1：在认证分支返回合法JSX #

在authenticated分支中添加返回值，比如null或加载提示，确保组件符合React的渲染要求：

import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react";
import Head from "next/head";
import { GoogleButton } from "~/components";

export default function Home() {
  const router = useRouter();
  const { data: session, status } = useSession();
  console.log("inside index");

  if (status === "authenticated") {
    console.log("status is:", status);
    router.push("/dashboard/users");
    // 返回null或加载提示，满足React组件渲染要求
    return null;
    // 或者返回加载状态：return <p>Redirecting to dashboard...</p>;
  } else if (status === "unauthenticated") {
    console.log("status is:", status);
    return (
      <>
        <Head>
          <title>Login</title>
        </Head>
        <div className="mt-72 text-center">
          <GoogleButton />
        </div>
      </>
    );
  } else if (status === "loading") {
    console.log("status is:", status);
    return <p>loading</p>;
  }
  // 兜底返回，避免所有条件都不匹配的情况
  return null;
}

方案2：使用useEffect执行跳转（更推荐） #

把跳转逻辑放到useEffect中，确保组件先完成渲染，再触发路由跳转，彻底避免渲染错误：

import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react";
import Head from "next/head";
import { GoogleButton } from "~/components";
import { useEffect } from "react";

export default function Home() {
  const router = useRouter();
  const { data: session, status } = useSession();
  console.log("inside index");

  useEffect(() => {
    if (status === "authenticated") {
      console.log("status is:", status);
      router.push("/dashboard/users");
    }
  }, [status, router]);

  if (status === "unauthenticated") {
    console.log("status is:", status);
    return (
      <>
        <Head>
          <title>Login</title>
        </Head>
        <div className="mt-72 text-center">
          <GoogleButton />
        </div>
      </>
    );
  } else if (status === "loading") {
    console.log("status is:", status);
    return <p>loading</p>;
  }

  // 认证状态下返回加载提示或null
  return <p>Redirecting to dashboard...</p>;
}

为什么刷新后正常？ #

刷新/dashboard/users时，Next.js直接渲染该页面，不会经过Home组件的错误逻辑，因此页面能正常加载。

内容的提问来源于stack exchange，提问作者Anchal Gupta