Next.js中useRouter()处理映射变量时路由跳转失效，如何解决？

针对你代码中router.push无法触发路由跳转的问题，可以从以下几个方向排查修复：

1. 确认useRouter的正确导入 #

根据你使用的Next.js路由体系选择对应导入：

• Pages Router（Next.js 12及更早，或13+的pages目录）：

  import { useRouter } from 'next/router';
  

• App Router（Next.js 13+的app目录）：

  import { useRouter } from 'next/navigation';
  

导入错误会导致router对象无效，自然无法触发跳转。

2. 修复无效的HTML结构 #

你代码中直接用div包裹<li>标签不符合HTML规范（<li>必须是<ul>或<ol>的子元素），浏览器会自动修正DOM结构，可能破坏事件绑定逻辑。调整为合规结构：

const router = useRouter();
return (
  <ul className='user-list'>
    {Usercategory.map((user, index)=>{
      return (
        <li key={index} className='user-li' onClick={()=>{router.push(user.link)}}>
          <span>{user.icon}</span>
          <div>
            <span>{user.name}</span>
            <span>{user.entry}</span>
          </div>
        </li>
      )
    })}
  </ul>
)

3. 改用官方推荐的Link组件 #

Next.js推荐使用<Link>组件实现客户端路由跳转，比手动绑定onClick更可靠且自带优化：

import Link from 'next/link';

// Pages Router和App Router通用该导入
return (
  <ul className='user-list'>
    {Usercategory.map((user, index)=>{
      return (
        <li key={index} className='user-li'>
          <Link href={user.link}>
            <span>{user.icon}</span>
            <div>
              <span>{user.name}</span>
              <span>{user.entry}</span>
            </div>
          </Link>
        </li>
      )
    })}
  </ul>
)

4. 验证路由地址有效性 #

确认user.link的值是合法的路由字符串（如'/user/profile'），可以在点击事件中添加日志排查：

onClick={()=>{
  console.log('跳转地址:', user.link);
  router.push(user.link);
}}

如果打印出的地址为空、格式错误或不存在对应的路由，跳转自然无法生效。

5. 检查事件冒泡是否被阻止 #

排查user.icon或内部子元素是否存在onClick事件调用了event.stopPropagation()，这会阻止父级元素的点击事件触发。若有此类代码，需移除或调整事件逻辑。

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