🐛 Refactor useRouter Usage for App Router Migration

[ZenoWang1999]

🐛 Describe the Bug

Many components are utilizing useRouter, but its usage in the app router differs significantly from the page router. This mismatch results in runtime errors.
See https://nextjs.org/docs/14/app/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks

🧑‍💻 Reproduction Steps

1. Use a component with useRouter that was implemented for the page router.
2. Attempt to run the app with the app router.
3. Observe runtime errors caused by incorrect useRouter usage.

🎯 Expected Behaviour

Components using useRouter should be updated for compatibility with the app router.

💼 Tasks

• Audit the codebase to identify components using useRouter.
• Update the implementation of useRouter where needed to meet app router requirements.
• Test updated components to ensure compatibility.

✅ Acceptance Criteria

All components using useRouter function without errors in the app router.

➕ More Information

Refer to the Next.js documentation for app router migration:
https://nextjs.org/docs/14/app/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks