Next.js Discord

Discord Forum

Link component not client routing pages

Answered
Hanover Hound posted this in #help-forum
Open in Discord
Hanover HoundOP
I am using next ui navbar component and using Link in navbar item. On click this link is refreshing the page. Any idea why this is happening.
 
"use client";
import {
  Navbar,
  NavbarBrand,
  NavbarMenuToggle,
  NavbarMenuItem,
  NavbarMenu,
  NavbarContent,
  NavbarItem,
  Link,
  Button,
} from "@nextui-org/react";
import { BrandLogo } from "../assets/icons/BrandLogo.js";
import { useState } from "react";
import AccountMenu from "./AccountMenu/index.js";

export default function Nav() {
  const { data: session, status } = useSession();

  return (
    <Navbar isBordered>
        <NavbarContent
          className="hidden sm:flex flex-center gap-10"
          justify="center"
        >
          <NavbarItem>
            <Link color="foreground" href="/Dashboard">
              Dashboard
            </Link>
          </NavbarItem>
          <NavbarItem>
            <Link color="foreground" href="/ProjectAssets">
              Assets
            </Link>
          </NavbarItem>
          <NavbarItem>
            <Link href="/Pentests" color="foreground">
              Pentests
            </Link>
          </NavbarItem>
          <NavbarItem>
            <Link color="foreground" href="/Reports">
              Reports
            </Link>
          </NavbarItem>
        </NavbarContent>
    </Navbar>
  );
}
Answered by Cape horse mackerel
probably you have to wrap next ui link within next js link
import Link from 'next/link'
import { Link as NextUiLink } from "@nextui-org/react";

// ... the rest of the code
return (<Link href="/dashboard">
  <NextUiLink>Dashboard</NextUiLink>
</Link>)
View full answer

5 Replies

Cape horse mackerel
probably you have to wrap next ui link within next js link
import Link from 'next/link'
import { Link as NextUiLink } from "@nextui-org/react";

// ... the rest of the code
return (<Link href="/dashboard">
  <NextUiLink>Dashboard</NextUiLink>
</Link>)
Answer
Hanover HoundOP
thanks @Cape horse mackerel
Cape horse mackerel
Just pls mark the post as answered. Thanks
@Cape horse mackerel probably you have to wrap next ui link within next js link ts import Link from 'next/link' import { Link as NextUiLink } from "@nextui-org/react"; // ... the rest of the code return (<Link href="/dashboard"> <NextUiLink>Dashboard</NextUiLink> </Link>)
Ray
@Hanover Hound 
import Link from 'next/link'
import { Link as NextUiLink } from "@nextui-org/react";

// ... the rest of the code
return (<Link href="/dashboard" passHref>
  <NextUiLink>Dashboard</NextUiLink>
</Link>)

if the Link component from nextui use a tag, you may get some warning from linting which can be fixed by providing passHref props