Next.js Discord

Discord Forum

Pathname returns only /

Answered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
Does anyone knows why pathname returns only "/" ?

This is my code 

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

import { cn } from "@/lib/utils";

export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const pathname = usePathname();
  const routes = [
    {
      href: `/#home`,
      label: "Home",
      active: pathname === "/#home",
    },
    {
      href: `/#story`,
      label: "Story",
      active: pathname === "/#story",
    },
    {
      href: `/#menu`,
      label: "Menu",
      active: pathname === "/#menu",
    },
  ];

  return (
    <nav
      className={cn(
        "flex justify-center items-center space-x-4 lg:space-x-6 tracking-wider",
        className
      )}
    >
      {routes.map((route) => (
        <Link
          key={route.href}
          href={route.href}
          className={cn(
            "text-lg font-medium uppercase transition-colors hover:text-primary ",
            route.active ? "text-[#252525] dark:text-white" : "text-[#ae377d]"
          )}
        >
          {route.label}
        </Link>
      ))}
    </nav>
  );
}
Answered by Ray
ok change useHash to this
import { useParams } from "next/navigation";

const getHash = () =>
  typeof window !== "undefined"
    ? decodeURIComponent(window.location.hash.replace("#", ""))
    : undefined;

const useHash = () => {
  const [hash, setHash] = useState(getHash());
  const [mounted, setMounted] = useState(false);
  const params = useParams();

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    setHash(getHash());
  }, [params]);

  return mounted ? hash : null;
};
View full answer

25 Replies

window.location.hash
pathname is in window.location.pathname
Ojos AzulesOP
Thank you so much!
@Ojos Azules Thank you so much!
Ray
maybe this is what you looking for

"use client";
import { useEffect, useState } from "react";

const getHash = () =>
  typeof window !== "undefined"
    ? decodeURIComponent(window.location.hash.replace("#", ""))
    : undefined;

export const useHash = () => {
  const [hash, setHash] = useState(getHash());
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    const handleHashChange = () => {
      setHash(getHash());
    };
    window.addEventListener("hashchange", handleHashChange);
    return () => {
      window.removeEventListener("hashchange", handleHashChange);
    };
  }, []);

  return mounted ? hash : null;
};
Ojos AzulesOP
"use client";

import Link from "next/link";

import { cn } from "@/lib/utils";

export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const pathname = window.location.hash;

  const routes = [
    {
      href: `/#home`,
      label: "Home",
      active: pathname === "#home",
    },
    {
      href: `/#story`,
      label: "Story",
      active: pathname === "#story",
    },
    {
      href: `/#menu`,
      label: "Menu",
      active: pathname === "#menu",
    },
  ];

  return (
    <nav
      className={cn(
        "flex items-center space-x-4 lg:space-x-6 tracking-wider",
        className
      )}
    >
      {routes.map((route) => (
        <Link
          key={route.href}
          href={route.href}
          className={cn(
            "text-lg font-medium uppercase transition-colors hover:text-primary ",
            route.active ? "text-[#252525] dark:text-white" : "text-[#ae377d]"
          )}
        >
          {route.label}
        </Link>
      ))}
    </nav>
  );
}
This works now but doesnt work immediately it works only after refresh
need to add the listener
Ojos AzulesOP
I think i should try simpler code than this
this is very complicated for what i want i think
Ray
that is the most simple code, its just a custom hook
Ojos AzulesOP
I cant understand it completely
could you please adjust it on my code?
 "use client";

import Link from "next/link";

import {useHash} from '@/lib/hooks'
import { cn } from "@/lib/utils";

export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const hash = useHash();

  const routes = [
    {
      href: `/#home`,
      label: "Home",
      active: hash === "#home",
    },
    {
      href: `/#story`,
      label: "Story",
      active: hash === "#story",
    },
    {
      href: `/#menu`,
      label: "Menu",
      active: hash === "#menu",
    },
  ];

  return (
    <nav
      className={cn(
        "flex items-center space-x-4 lg:space-x-6 tracking-wider",
        className
      )}
    >
      {routes.map((route) => (
        <Link
          key={route.href}
          href={route.href}
          className={cn(
            "text-lg font-medium uppercase transition-colors hover:text-primary ",
            route.active ? "text-[#252525] dark:text-white" : "text-[#ae377d]"
          )}
        >
          {route.label}
        </Link>
      ))}
    </nav>
  );
}
if you want to keep the #
change window.location.hash.replace("#", "") to window.location.hash
Ojos AzulesOP
The problem insists. Again i need to refresh the page to change the active link
Ojos AzulesOP
i already have it
@Ojos Azules i already have it
Ray
ok change useHash to this
import { useParams } from "next/navigation";

const getHash = () =>
  typeof window !== "undefined"
    ? decodeURIComponent(window.location.hash.replace("#", ""))
    : undefined;

const useHash = () => {
  const [hash, setHash] = useState(getHash());
  const [mounted, setMounted] = useState(false);
  const params = useParams();

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    setHash(getHash());
  }, [params]);

  return mounted ? hash : null;
};
Answer
Ojos AzulesOP
Yeah now we good
I will study your code to see what you did
Thanks a lot!
Ray
cool, please mark solution if your issue is solved