Next.js useRouter.push()路由异常：登出后跳转失效求助

• 修正动态路由参数获取逻辑：你在user/[id].tsx中错误使用useSearchParams获取动态路由的id，Next.js App Router中动态路由参数需用useParams钩子。替换代码如下：

  // 替换import语句
  import { useRouter, useParams } from "next/navigation";
  // 替换id获取逻辑
  const params = useParams();
  const id = params.id as string;
  

  错误的参数获取会导致页面逻辑异常，甚至引发路由状态混乱。

• 完善登出异步逻辑：确保登出请求完成后再执行跳转，同时添加错误捕获避免请求失败阻塞跳转，必要时强制刷新路由：

  const handleDestroySession = async () => {
    try {
      await axios.get('http://localhost:3000/api/logout');
    } catch (err) {
      console.error('登出请求失败:', err);
    }
  };
  
  const logOut = async () => {
    await handleDestroySession();
    router.push('/');
    // 强制刷新路由，规避Next.js缓存影响
    router.refresh();
  };
  

• 彻底排查首页会话检测逻辑：暂时完全注释掉index.tsx中的useEffect和sessionHandler函数，测试登出跳转是否正常，排除残留逻辑干扰。

• 验证路由跳转行为：在logOut函数中添加日志，确认跳转逻辑是否执行，同时检查浏览器地址栏是否正确切换到/：

  const logOut = async () => {
    await handleDestroySession();
    console.log('执行首页跳转');
    router.push('/');
    console.log('当前地址:', window.location.href);
  };
  

  若地址栏已切换但页面未更新，说明是Next.js页面缓存问题，调用router.refresh()即可解决。

• 确认服务器端会话销毁彻底性：虽然浏览器会话已清除，需检查/api/logout接口是否彻底清除了服务器端的会话记录（如数据库、Redis中的会话数据），避免后续请求仍能获取旧会话信息。

内容的提问来源于stack exchange，提问作者Ricardo Hernández