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>
);
}
It looks like you are using React.
@sinnbeck could probably help you.
You can also have a look at this page.
https://inertiajs.com/links#active-states
Have you tried to console.log() the url and href variables to be sure they really have the same value ?
What do you mean it looses state? The login and register routes arent highlighted when you are on those ?
Please or to participate in this conversation.