Page is not loading when using router.push() properly.

[nirvikpurkait]

Summary

I am trying to implement a log-in route, where a form should be there, when a user log-in, (if the user provides valid information) the user should be redirected to the root route. I'm implementing it with react-hook-form for validation purpose, so, to submit the form I have to use onSubmit insted of action attribute.

// src/app/login/serverAction.ts

"use server"

export async function myServerAction (formData: FormData) {
  // do server related work
}

// src/app/login/page.tsx

"use client"

export default function page(){

  const router = useRouter()

  const submitForm = async (formData:FormData) => {

  // do client side activity

  await myServerAction(formData)
  router.push("/")
  }

  <form onSubmit={handleSubmit(submitForm)}>
  </form>
}

//src/app/page.tsx

export default function page () {
  <div>
  </div>
}

Additional information

I have experimented with redirect(), it is working, but I need client side navigation, because there can be requirement to check something form client before navigating.

I have used middleware.ts file, the request is coming upto the middleware file, but it is not reaching upto the specific component.

Example

No response

[aziyatali]

try router.refresh() first and then router.push("/").
Caching issue.

[nirvikpurkait]

If i use router.prefetch("/") it is working as expected, but I am not getting, why it is not working with router.push("/")

[aziyatali]

Are you using NextJs 14?

[nirvikpurkait]

Yes, I am using Next.Js 14.

[aziyatali]

Ah, the issue I mentioned persisted in NextJs 13, things might have changed.
Keep using router.prefetch if it is serving your purpose

[nirvikpurkait]

Well, as an update, when I tried the same with a brand new project, as well as in a cloud platform (e.g: codesandbox, only for the specified purpose), it was working fine with router.push("/"), however I don't know why it is not working properly, (sometime it does navigate, but sometime it does not).

And thank you for your time. 👍

[DevTK0]

When you try to navigate from the client side to a route generated server side, you might run into some problems. You can try the following approach:

// src/app/login/page.tsx

import {Login} from "src/app/login/page_client.tsx"
export default function page(){

  if (logged_in) redirect("/") 

  return ( <Login /> )
}

// src/app/login/page_client.tsx

"use client"

export default function page(){

  const router = useRouter()

  const submitForm = async (formData:FormData) => {

  // do client side activity

  await myServerAction(formData)
  router.refresh() <= use this instead.
  }

  <form onSubmit={handleSubmit(submitForm)}>
  </form>
}

Essentially, you wrap your route around a SSR component and have it redirect instead. You then trigger the redirect on the client side by calling router.refresh()

[bebraw]

Thank you so much. It looks like crossing that client/server boundary is problematic with Next router. Are these caveats documented somewhere?

[pavel-vorobev-quantumsoft]

Faced same behaviour of router. Fixed by e.preventDefault(); in handler. https://stackoverflow.com/questions/71961539/router-push-is-not-working-as-expected-nextjs

[ggrantrowberry]

@nirvikpurkait Did you ever figure out what the issue was? I'm facing this issue right now.

[nirvikpurkait]

Umm, no I didn't. I was facing the issue and as I said earlier, if I use router.prefetch() it is working, so I proceeded with that. You can do the same.

[Schlumpf9]

I've had the same problem that my router.push('/') didn't work as expected inside a onSubmit() function even using e.preventDefault(). As routing to any other page except the root url "/" works, i am even more confused.

In Next.js 14 they started to cache a lot of things by default, which also broke a lot of code (regarding to some research). Even reverting back most of that default caching in Next.js 15 there are still some strange behaviours. Nevertheless i was getting rid of it using router.push("/?r=${Math.random()}"); and that is working without any problems. So for me it seems like somehow an cache issue as routing the the root url including some random search parameters works as expected...

[jscastanos]

@Schlumpf9 that didnt work for me as it does add the random strings even without manually adding it to the router.push.

[JoeBryans]

await signIn("credentials",{
email,
password,
redirect:false
}

This will fix the problem I tried it and it worked

[na-zi-ya]

I'm using Next.js 15, and router.push() is working fine in development but not in production after the user logs in. What could be the possible reasons, and how can I fix this...??

[ClassyCircuit]

I have exactly the same problem. This is starting to look like a bug in next.js.

[mario8a]

I updated to v15.2.3, and some router.push() calls didn’t work. They only worked after adding setTimeout(() => router.push('/users/configure'), 0);. I'm not sure if this is an issue with this Next.js version.

[DenisBessa]

In the cases you described, does the component or the route used the hook useSearchParams()? I think it can play a role here, but I'm trying to confirm my theory first.

[shestakov-vladyslav]

Have the same issue

I have downgraded to 15.1 and it works again

[JoeBryans]

If it's for sign in and you are using next auth then add redirect:false

[zaini]

What might help also is to use revalidatePath("/whatever"); for the route that you're failing to redirect to.

Essentially I think if you have some middleware that causes the redirect to fail (e.g. due to user not being logged in), then it caches that so even after they log in, the middleware will say they shouldn't be allowed to redirect. To fix it, clear the cache for that page by using revalidatePath

I hate this....

edit: this aint even working for me now so nvm. just use window.location.href

[tomelliot]

I'm having this issue today (next: 15.5.0, @supabase/ssr: ^0.7.0, @supabase/supabase-js: ^2.56.0).

I worked around it by avoiding adding a timestamp to the search params to avoid caching issues.

router.push(`/app?t=${Date.now()}\`);