Nextjs 警告：在渲染不同的组件（`Home`）时无法更新组件（`Router`）。找到 `Home` 中错误的 setState() 调用

Question

我在我的 Next.js 项目中使用 firebase 作为后端。在使用路由时我遇到一些错误：

我的代码：

"use client";
import { useAuthContext } from "@/context/AuthContext";
import Login from "./login/Loginpage";
import { useRouter } from "next/navigation";
import React from "react";

export default function Home() {
  const { user } = useAuthContext();
  const router = useRouter();

  const data = user == null ? <Login /> : router.push("../admin");
  return <>{data}</>;
}

一切正常，但我在控制台中收到以下错误。

Warning: Cannot update a component (`Router`) while rendering a different component (`Home`). To locate the bad setState() call inside `Home`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Home (webpack-internal:///(app-client)/./src/app/adminLogin/page.js:20:91)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11)

我尝试了很多方法来修复它 下面的代码没有给出任何错误，但是 DOM 在路由之前加载

'use client'
import React from "react";
import { useAuthContext } from "@/context/AuthContext";
import { useRouter } from "next/navigation";
import Login from "./login/Loginpage";
function Page() {
    const { user } = useAuthContext()
    const router = useRouter()

    React.useEffect(() => {
        if (user == null) router.push("../admin")
    }, [user])

    return (<><Login/></>);
}

export default Page;

有没有办法在 DOM 加载之前进行路由或者有没有办法解决第一个代码中的错误？

Answer 1

您可以添加条件渲染以确保组件仅在条件为真时渲染

return (
<>{user && <Login />}</>
)

Answer 2

您可以使用重定向来代替... 从“下一步/导航”导入{重定向} 常量数据 = 用户 == null ？ ：重定向（“../admin”）；