'use client'
const router = useRouter();
useEffect(()=>{
if(isxyz) {
router.push("/xyz")
return;
}
router.push("/abc");
},[isxyz])
its not navigating client side, it navigates user to xyz/ abc page by reloading the page
#the problem statement is redirecting user depending on api response after some user actions
regal forum
waxen fieldBOT
Hi @regal forum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The behavior you're experiencing might be due to the way Next.js handles navigation. When you use router.push() from the useRouter hook, it performs a "soft navigation", which means only the route segments that have changed are re-rendered. This is also known as partial rendering and it enables client React state to be preserved during navigation (source (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation)).
However, if you're experiencing a full page reload, it might be due to some other factors. One possible reason could be the use of server actions immediately after useRouter().push("/url"). As mentioned in a GitHub issue, this is due to action queuing and is expected. The action might return a revalidate payload so the client needs to wait. It's recommended to use revalidatePath/redirect instead of router.push, which will also save another round trip to the server (source (https://github.com/vercel/next.js/issues/65287)).
Here's an example of how you can use useRouter:
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}
(source (https://nextjs.org/docs/app/api-reference/functions/use-router))