nextjs 13.5链接正在刷新页面

axzmvihb 于 2023-10-18 发布在其他

关注(0)|答案(2)|浏览(118)

bounty将在10小时后过期。此问题的答案有资格获得+50声望奖励。kartikay dwivedi希望引起更多的注意这个问题。

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;

所以我有几个疑问，因为我是新的下一个btw会话存储是一个变量，只有这样才需要调用。1.为什么当我点击导航栏链接时整个页面都在刷新2.为什么配置文件中没有触发useeffect并且路由不受保护

next.js

来源：https://stackoverflow.com/questions/77258183/nextjs-13-5-link-is-refreshing-page

2条答案

按热度按时间

fv2wmkja1#

Next.js中的Link组件旨在处理客户端导航，而不会导致整个页面重新加载。它使用JavaScript拦截点击事件并执行导航，而不向服务器发出实际的HTTP请求。
要解决此问题，您应该替换 Package 在<Link>组件中的<li>元素，而不是直接使用<a>标记。下面是代码的更新版本：

import Link from "next/link";
import React from "react";

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

export default Navbar;

通过将<a>标签 Package 在组件中，Next.js将处理导航并防止在单击链接时重新加载整个页面。

赞(0）回复(0）举报 2023-10-18

lkaoscv72#

<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>

这个JSX结构是无效的，因此导致完全重新加载。将代码改为：

<div>
      <ul className="flex m-10 gap-10">
        <li>
          <Link href="/">
            Home
          </Link>
        </li>
        <li>
          <Link href="/signin">
            SignIn
          </Link>
        </li>
        <li>
          <Link href="/signup">
            SignUp
          </Link>
        </li>
        <li>
          <Link href="/profile">
            Profile
          </Link>
        </li>
      </ul>
    </div>

赞(0）回复(0）举报 2023-10-18

我来回答

nextjs 13.5链接正在刷新页面

2条答案

相关问题

热门标签

最新问答