遵守Hook规则前提下如何正确使用useRouter？

你的理解是正确的，行2的写法完全符合React Hook规则，具体逻辑如下：

• 首先明确规则的适用范围：React Hook规则只限制use开头的Hook函数本身的调用时机，不对Hook返回值的使用行为做约束。你需要保证useRouter()这个函数本身只在组件顶层调用，但是它返回的router对象的使用时机没有任何限制。
• 行1报错的根本原因：你在异步回调函数submitHandler内部直接调用了useRouter()这个Hook函数，回调属于组件的嵌套逻辑，不符合「Hook必须在React函数组件最顶层作用域调用」的要求，因此触发Invalid hook call错误。
• 行2合规的原因：你已经在组件顶层合法调用useRouter()拿到了router实例的引用并存入router变量，后续在回调中调用router.push()属于调用普通JavaScript对象的实例方法，完全不属于Hook调用行为，自然不会违反Hook规则。

额外说明：所有React Hook都遵循这个通用逻辑，只要你保证useXXX函数的调用位置是组件顶层，返回值可以在组件内任意逻辑（事件回调、异步函数、嵌套代码块等）中正常使用，不会触发规则校验错误。

内容的提问来源于stack exchange，提问作者itsonlyme