how to update login/logout button?
Unanswered
American black bear posted this in #help-forum
American black bearOP
so i have this jsx:
the problem is the pages don't rerender when the user is redirected
so the "login" link still shows even after one's logged in- it only changes when the tab refreshes
how do i fix this?
export function Header() {
const [loginout, setLoginout] = useState({txt: "", url: ""});
useEffect(() => {
if (localStorage.getItem("token")) {
setLoginout({txt: "Log out", url: "/logout"});
} else {
setLoginout({txt: "Log in", url: "/login"});
}
}, []);the problem is the pages don't rerender when the user is redirected
so the "login" link still shows even after one's logged in- it only changes when the tab refreshes
how do i fix this?
8 Replies
Where is the component? If it’s inside of a layout, it won’t be unmounted. Since you are putting it in a
useEffect, add the status as a dependency could fix your problemas for the layout i don't completely understand
the component is included here:
export default function App({Component, pageProps}) {
return <>
<Header />
<Component {...pageProps} />
<Footer />
</>;
}Seems like you are using Pages Router, the solution is the same. “status†is referring to login status, like a boolean indicating that the user is logged in or not
You can add it to the dependency array of useEffect
Another option is to add the router object instead, which is changed on navigation.
const router = useRouter()
useEffect(() => …, [router])American black bearOP
oh nice