Next.js 13.5中Link跳转刷新及Profile路由保护失效问题咨询

你的代码 #

import Link from "next/link";

import React from "react";

const Navbar = () => {
  return (
    <div>
      <ul className="flex m-10 gap-10">
        <Link href="/">
          <li>Home</li>
        </Link>
        <Link href="/signin">
          <li>SignIn</li>
        </Link>
        <Link href="/signup">
          <li>SignUp</li>
        </Link>
        <Link href="/profile">
          <li>Profile</li>
        </Link>
      </ul>
    </div>
  );
};

export default Navbar;

"use client";

import { sessionStatus } from "../utils/session";

import { redirect } from "next/navigation";
import React, { useEffect } from "react";

const Page = () => {
  useEffect(() => {
    const session = sessionStatus;
    if (!session) {
      console.log("hello");
      redirect("/");
    } else {
      console.log("wow");
    }
  }, []);

  console.log("render");
  return <div>Profile page ddddd</div>;
};

export default Page;
import React from "react";

const Page = () => {
  return <div>SignIn page</div>;
};

export default Page;

问题1：点击Link组件时整个页面刷新 #

原因 #

你的Navbar组件没加"use client"指令，在Next.js App Router里，组件默认是服务器组件。服务器组件里的Link没法启用客户端导航，会退化为普通的HTTP跳转，导致全页刷新。

解决办法 #

在Navbar文件的最顶部加上"use client"，把它改成客户端组件：

"use client"; // 必须放在文件第一行
import Link from "next/link";
import React from "react";

const Navbar = () => {
  // 原有代码不变
};

export default Navbar;

另外，规范写法建议给Link内部的元素套个<a>标签（结构更清晰，不影响功能）：

<Link href="/">
  <a>
    <li>Home</li>
  </a>
</Link>

问题2：Profile页面的useEffect没触发，路由保护失效 #

原因 #

1. "use client"位置错误："use client"必须是文件的第一行语句，你把它放在了其他代码后面，导致指令不生效，Profile组件还是服务器组件。
2. 服务器组件不支持useEffect：服务器组件仅在服务器端渲染，不会在客户端运行，所以useEffect根本不会执行。而且redirect在服务器组件里应该直接在组件顶层调用，不能放在useEffect中。

解决办法 #

1. 拆分文件：把Navbar、Profile页面、SignIn页面分别放到独立文件里：

   • Navbar → components/Navbar.js
   • Profile页面 → app/profile/page.js
   • SignIn页面 → app/signin/page.js

2. 修正Profile页面的"use client"位置：在app/profile/page.js最顶部加"use client"：

"use client"; // 必须是文件第一行
import { sessionStatus } from "../utils/session";
import { redirect } from "next/navigation";
import React, { useEffect } from "react";

const Page = () => {
  useEffect(() => {
    if (!sessionStatus) {
      redirect("/");
    }
  }, [sessionStatus]); // 添加依赖，确保session变化时重新检查

  return <div>Profile page ddddd</div>;
};

export default Page;

3. 更优的路由保护方案：如果sessionStatus是服务器端获取的状态，直接在服务器组件里做判断更稳妥，不会出现客户端闪烁：

import { sessionStatus } from "../utils/session";
import { redirect } from "next/navigation";

// 直接在组件顶层判断
if (!sessionStatus) {
  redirect("/");
}

const Page = () => {
  return <div>Profile page ddddd</div>;
};

export default Page;

内容的提问来源于stack exchange，提问作者kartikay dwivedi