2

Recently I started learning nextjs (13) and have this problem with navbar. The problem is that when I move through navbar to other section it's not affect the state and not adding class to that Link component so that the border of picked section display (that means we are on that section). When click second time on the same section it shows. I think it's all about server-side-rendering ofc.

const [selected, setSelected] = useState();

const click = (option) => {
    setSelected(option);
};

return (
    <div className="flex text-center flex-row navbar font-mono">
        <div className="navLink">
            <Link
                onClick={() => click("popular")}
                className={`option ${selected === "popular" ? "clicked" : ""} p-1`}
                href={`/most_popular`}
            >
                Most Popular
            </Link>
        </div>
        <div className="navLink">
            <Link
                onClick={() => click("rated")}
                className={`option ${selected === "rated" ? "clicked" : ""} p-1`}
                href={`/top_rated`}
            >
                Top Rated
            </Link>
        </div>
        <div className="navLink">
            <Link
                onClick={() => click("upcoming")}
                className={`option ${selected === "upcoming" ? "clicked" : ""} p-1`}
                href={`/upcoming`}
            >
                Upcoming
            </Link>
        </div>
    </div>
);

};

I am doing this simple, but what we have after clicking on specify Link it shows the server generated page, which is navBar without class clicked.

I was trying to use such a hooks like useRouter (next/navigation instead next/router), but we cannot get the current pathname now from it.

Mateusz
  • 21
  • 2
  • Not enough code examples to find problem. Will be great to make minimal representation in codesandbox. Im sure that problem in some simple mistake. SSR is not to blame, Next is the same react and 90% of react code wil work same in Next – rycha Feb 19 '23 at 17:36
  • Did you ever find a solution to this problem? I seem to be dealing with the same issue. A client component is rendered by a server parent, and whenever I update my useState it seems to throw the whole component out and render a new one with initial state again. – Joseph Boyd May 23 '23 at 03:53

0 Answers0