Next.js新router无法await导航：如何实现禁用按钮的类似效果？

在App Router里，router.push不再返回Promise，但可以通过useNavigation钩子提供的导航状态来实现和旧版一样的按钮禁用效果，不用额外定义状态变量：

1. 引入useNavigation钩子
   从next/navigation中导入useNavigation：

   import { useNavigation } from 'next/navigation';
   

2. 获取导航状态
   在组件内初始化navigation对象：

   const navigation = useNavigation();
   

3. 控制按钮禁用状态
   将按钮的disabled属性绑定到navigation.state === 'loading'，这样导航过程中按钮会自动保持禁用：

   <button 
     type="submit" 
     disabled={navigation.state === 'loading'}
   >
     提交
   </button>
   

4. 改造提交函数
   不用再await router.push，直接调用即可，导航状态会自动更新：

   async function onSubmit(input: CreatePostFormData) {
       try {
           await BlogApi.createBlogPost(input);
           router.push(`/blog/${slug}`); // 直接调用，无需await
       } catch (error) {
           console.error(error);
           alert(error);
       }
   }
   

原理是：调用router.push后，navigation.state会变成loading，直到页面导航完成后切换回idle，利用这个内置状态就能直接控制按钮的禁用状态，完全不需要自定义额外的状态变量。

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