Thanks to visit codestin.com
Credit goes to github.com

Skip to content

redirect() function not redirecting in client components #59163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 task done
pedro757 opened this issue Dec 1, 2023 · 7 comments
Open
1 task done

redirect() function not redirecting in client components #59163

pedro757 opened this issue Dec 1, 2023 · 7 comments
Labels
bug Issue was opened via the bug report template. Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@pedro757
Copy link
Contributor

pedro757 commented Dec 1, 2023

Link to the code that reproduces this issue

https://github.com/pedro757/redirect-issue-client-components

To Reproduce

  1. Click the button

Current vs. Expected behavior

Currently it's not redirecting to the otherpage
I expect to actually redirect to the otherpage

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Mon Nov 20 12:57:36 UTC 2023
Binaries:
  Node: 20.5.1
  npm: 10.2.1
  Yarn: 1.22.19
  pnpm: 8.10.3
Relevant Packages:
  next: 14.0.4-canary.32
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Additional context

I have used redirect in server actions and it seems to be working good, the problem seems to be on client components
@pedro757 pedro757 added the bug Issue was opened via the bug report template. label Dec 1, 2023
@github-actions github-actions bot added the Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. label Dec 1, 2023
@Fredkiss3
Copy link
Contributor

redirect is function that can only be used in server components, you should instead use router.push() on the client.

@pedro757 pedro757 changed the title redirect() function not redirecting on client components redirect() function not redirecting in client components Dec 1, 2023
@pedro757
Copy link
Contributor Author

pedro757 commented Dec 1, 2023 •
edited
Loading

redirect is function that can only be used in server components, you should instead use router.push() on the client.

In the first paragrapth the docs say we can use it in client components, however I believe the explanation to this problem is this

If that's the case, I wonder what an use case for redirect in client components would be?

@inducingchaos inducingchaos mentioned this issue Dec 11, 2023
Open
1 task
@jvdhr
Copy link

jvdhr commented Jul 11, 2024

redirect in server components/actions doesn't seem to work if it's being called in a trycatch block.

@ceyhun-yildiz
Copy link

redirect in server components is not working for me in try/catch block

Screenshot 2024-07-16 at 11 56 44

@yassin-mokni
Copy link

To perform client-side navigation (redirect) in a client component, you should use the router.push() method from Next.js's useRouter hook. , replace the redirect() call with router.push().

@rdev32
Copy link

rdev32 commented May 5, 2025

router.push doesnt work on mobile devices

@QiiLimited
Copy link

QiiLimited commented May 5, 2025 •
edited
Loading

To perform client-side navigation (redirect) in a client component, you should use the router.push() method from Next.js's useRouter hook. , replace the redirect() call with router.push().

Hey he was asking for the server components. Do you know why is redirect not working in the try catch block?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@yassin-mokni @pedro757 @Fredkiss3 @jvdhr @ceyhun-yildiz @rdev32 @QiiLimited