I have a Next.js / React.js project I'm working on and I'm trying to redirect to a certain page when browser's back button is clicked. My approach is as follows
useEffect(() => {
Router?.beforePopState(({ as }) => {
if (as !== router.asPath) {
handleRouteChange({ toHref: getRoutingPath('HOME') }, Router.push);
}
return true;
});
return () => {
Router?.beforePopState(() => true);
};
}, [dispatch, router]);
And this code works. When I click the back button, it takes me to the home page as intended.
But the issue is, when I click on the back button, it takes me to the previous page for a second and then redirects to the home page. How can I prevent going to the previous page at all?
You can return false from the beforePopState callback to disable Next.js handling the routing automatically and handle it yourself.
From the router.beforePopState documentation:
If
cbreturnsfalse, the Next.js router will not handlepopstate, and you'll be responsible for handling it in that case. See Disabling file-system routing.
useEffect(() => {
router.beforePopState(({ as }) => {
if (as !== router.asPath) {
handleRouteChange({ toHref: getRoutingPath('HOME') }, Router.push);
return false;
}
return true;
});
return () => {
router.beforePopState(() => true);
};
}, [router]);