Error: React Hook "useRouter" is called conditionally. React Hooks must be called in the exact same order in every component render.

[DanielHirunrusme]

The error below is being thrown on every auth route component (i.e https://github.com/vercel/nextjs-subscription-payments/blob/main/components/ui/AuthForms/Signup.tsx)

Error: React Hook "useRouter" is called conditionally. React Hooks must be called in the exact same order in every component render.

It's due to this line of code: const router = redirectMethod === 'client' ? useRouter() : null;

If you want to provide the option of redirecting based on server/client should this const instead be assigned with a useEffect/useState?

Or would it be safe just to assigned it as: const router = useRouter()

[MartinSWDev]

I found just separating out the ternary and replacing the router uses where the error highlights fixed this : const router = useRouter(); const routerMethod = redirectMethod === 'client' ? router : null;