I have following component in next js:
const NavButton = ({icon, 'icon-active': iconActive, title, link, badge, refreshable = false}) => {
const {pathname, reload} = useRouter();
const isActive = link === pathname;
const Icon = isActive ? iconActive : icon;
const handleRefreshIfRequired = e => {
if (!refreshable) return;
if (isActive) {
e.preventDefault();
reload();
}
};
return <Link href={link}
onClick={handleRefreshIfRequired}
className={clsx('home-page-button', {'home-page-button-active': isActive})}>
<div className="button-icon">
<Icon/>
</div>
<div className="button-title">
{title}
{badge && <strong
className={'bg-danger card text-white px-1 border-none ms-1 font-bold animate-fade inline-block'}>{abbrNumber({number: badge})}</strong>}
</div>
</Link>;
};
Now when I use the component, it says:
Warning: React has detected a change in the order of Hooks called by NavButton. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
Previous render Next render
------------------------------------------------------
1. useContext useContext
2. undefined useContext
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^