I have been using localStorage and useEffect to check the authentication state, and conditionally rendering Navbar items based on the status. However, I encountered an error: Warning: Prop href did not match. Server: "/LoginForm" Client: "/Profile". Can someone please assist me with this issue?
export default function App({Component, pageProps}) {
const authStorage = typeof window !== "undefined" && localStorage.getItem('isAuth')
const [isAuth, setAuth] = useState(authStorage ?? null)
useEffect(() => {
localStorage.setItem("isAuth", isAuth)
}, [isAuth])
return (
<AppContext.Provider
value={{
isAuth,
setAuth
}}>
<Layout>
<Component {...pageProps} />
</Layout>
</AppContext.Provider>
)
}
export default function Nav() {
const [visible, setVisible] = useState(false);
const value = useContext(AppContext);
const router = useRouter()
const menuOne = [
{label: <Link href='/LoginForm'>Log In</Link>, key:'0'},
{label:<Link href='/RegisterForm'>Sign Up</Link>, key:'1'},
]
const menuTwo=[
{label: <Link href='/Profile'>Profile</Link>, key:'2'},
{label:<Link href='/Tickets'>Tickets</Link>, key:'3'},
{label: <span onClick={Logout}>Logout</span>}
]
return (
<div className="menu">
<Link href='/'>
<div className="logo"/>
</Link>
<Menu items={!value.isAuth || value.isAuth === "false" ? menuOne : menuTwo} theme="dark" mode='horizontal' disabledOverflow='true'/>
<Button className="barsMenu" type="primary" onClick={visible ? onClose : showDrawer}>
<span className="barsBtn"/>
</Button>
<Drawer
placement="bottom"
closable={false}
onClose={onClose}
open={visible}
closeIcon
>
{!value.isAuth || value.isAuth === 'false' ?
(
<>
<Link href='/LoginForm'>
<Button onClick={onClose}>Log in</Button>
</Link>
<Link href='/RegisterForm'>
<Button onClick={onClose}>Sign up</Button>
</Link>
</>
)
:
(
<>
<Link href='/Profile' onClick={onClose}>
<Button>Profile</Button>
</Link>
<Link href='/Tickets' onClick={onClose><Button>My tickets</Button></Link>
<div className='logout' onClick={Logout}><span onClick={onClose}><Button>logout</Button></span></div>
</>
)
}
</Drawer>
</div>
)
}