Redirect() function not working on Client Component

[pedro757]

I'm on v14.0.3

[icyJoseph]

Code snippet?

redirect only works in a few ways... like, as you render, or within server actions. So, I'd need to see some code before saying something.

[pedro757]

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

[pedro757]

I created an issue here

[pedro757]

Also the second parameter of that function marks error all the time see

[icyJoseph]

Yeah, so you have it within a click handler, and AFAIK, that's not gonna work.

The reason is the way the redirect function is designed.

In short, it is equivalent of throw new Error(/* something */), and as you know, when you throw an error as you render, you activate the closest Error Boundary:

• next.js/packages/next/src/client/components/redirect-boundary.tsx

  Line 12 in cc42e43

  interface RedirectBoundaryProps {

In this case, that boundary checks if the error encountered, is a redirect error type, if not, then the boundary itself throws again, to propagate the error up the React tree. If it is a Redirect error, then it does the redirection. That's how it works in Client Components.

So now you need to understand, that in Client Components (or the regular components we used up till now) when promises, interactivity callbacks and such, throw, they do not throw in the render process, so they do not activate their wrapping error boundaries. To activate the boundary, you literally need to fail/error as you render the component.

• https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react#handle-all-errors

I recommend reading that article, but in particular the handle all errors section.

And so, you have to use router.push or router.replace rather than redirect if you wanna do this inside the onClick handler.

It is not an issue.

[pedro757]

Thank you! I just think the name of the function is misleading here, I also think that should be in the docs

[icyJoseph]

No worries, well, I think it was documented, and that's where I learned all of this. It is unfortunately, one of those things where you just have to read the small letters :/ hopefully, they'll improve the docs for that.

There's another way to mess this up... if you have a try/catch server actions, and you redirect inside the try block... then your catch block would potentially swallow the redirect 😅

Note how redirect is being called outside of the try/catch block. This is because redirect works by throwing an error, which would be caught by the catch block. To avoid this, you can call redirect after try/catch. redirect would only be reachable if try is successful. - https://nextjs.org/learn/dashboard-app/error-handling#adding-trycatch-to-server-actions

[pedro757]

Thank you!, good to know that as well!

[inderps]

Yeah I also think renaming it to something else would save a lot of time for people. A regular redirect function should work no matter where it is placed.