search

vercel / nextjs-subscription-payments

Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://subscription-payments.vercel.app/
MIT License
5.77k stars 1.18k forks source link

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

Open DanielHirunrusme opened 1 month ago

DanielHirunrusme commented 1 month ago

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 commented 3 days ago

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;