How to use `router.push` within a Link component
Unanswered
Tonkinese posted this in #help-forum
TonkineseOP
The the title says, trying to use
router.push in inside a Link component, but getting an Invalid hook call. error for the following code:const gotoLink = ({ event, href }) => {
event.preventDefault();
const router = useRouter();
//event.stopPropagation();
return router.push(href);
};4 Replies
@Tonkinese The the title says, trying to use `router.push` in inside a Link component, but getting an `Invalid hook call.` error for the following code:
tsx
const gotoLink = ({ event, href }) => {
event.preventDefault();
const router = useRouter();
//event.stopPropagation();
return router.push(href);
};
hooks aren't meant to be called inside functions, they are meant to be called at the top level of your component
Asian black bear
Also, using programmatic navigation within a Link component sounds like a huge code smell.
@Asian black bear Also, using programmatic navigation within a Link component sounds like a huge code smell.
TonkineseOP
in most cases you're right, but this is one of those exceptions where I think the UX benefits from nested links