Question 263408 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – nextjs 13.5 link is refreshing page

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;

so i have few doubts , as i am new to next
btw session storage is a variable only so need to call.
1.why the whole page is refreshing when i click on navbar links
2.why useeffect is not triggering in profile and route is not protected

Tags:

2

Answers


  1. 0

    The Link component in Next.js is designed to handle client-side navigation without causing a full page reload. It uses JavaScript to intercept the click event and perform the navigation without making an actual HTTP request to the server.

    To fix the issue, you should replace the <li> elements wrapped in <Link> components instead of using <a> tags directly. Here’s an updated version of your code:

    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;

    By wrapping the <a> tags inside the components, Next.js will handle the navigation and prevent full page reloads when clicking on the links.

    Login or Signup to reply.
  2. 0 
          <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>

    This JSX structure is invalid, hence, causing a full reload. Instead change your code to the following:

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search