Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MrRobot993's avatar

Why active link lose active state if I go in login or register but with others links works?

Hi, I'm trying to setup a navbar with links which go active on click. The code works for links simple but lose state in login and register. Why?

import Navbar from '@/Components/Navbar';
import { Link, Head } from '@inertiajs/inertia-react';

const Homepage = (props) => {
    return (
       <>
            <Head title="Homepage" />
            <Navbar />
            <h1>Homepage</h1>
       </>
    );
}

export default Homepage;
import NavLink from './NavLink';

const Navbar = () => {

    return (
        <>
            <nav className="navbar flex px-3 py-6 justify-between">
                <div className="left-navbar flex">
                    <div className="logo-container mr-6">
                        <svg viewBox="0 0 248 31" className="text-slate-900 dark:text-white w-auto h-5">... </svg>
                    </div>
                    <div className="links">
                        <NavLink href={route('homepage')} children="link-1" />
                        <NavLink href={route('homepage')} children="link-2" />
                        <NavLink href={route('homepage')} children="link-3" />
                    </div>
                </div>
                <div className="right-navbar flex">
                    <div className="utils">
                        <NavLink href={route('login')} children="login"/>
                        <NavLink href={route('register')} children="register"/>
                    </div>
                </div>
            </nav>
        </>
    );
}

export default Navbar;
import { usePage, Link } from '@inertiajs/inertia-react';
import { useState } from 'react';

export default function NavLink({ href, children }) {
    const { url, component } = usePage();
;
    return (
        <Link
            preserveState
            href={href}
            className={
                url === href
                    ? 'active inline-flex items-center mr-2 px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
                    : 'inline-flex items-center mr-2 px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
            }
        >
            {children}
        </Link>
    );
}
0 likes
3 replies
Sinnbeck's avatar

What do you mean it looses state? The login and register routes arent highlighted when you are on those ?

1 like

Please or to participate in this conversation.