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()

[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