Next.js next/router报Invalid href passed to router错误如何解决

解决方案 #

可以根据你的业务场景任选以下一种或多种组合使用：

• 方案1：路由跳转前增加合法性校验，拦截非法请求
  在执行跳转前先判断userId是否已成功获取，未获取则直接终止跳转逻辑，可选增加用户提示：

  handleClick = () => {
    // some code
    if (!userId) {
      // 可替换为你的全局提示逻辑
      console.warn('用户信息加载中，请稍后重试')
      return
    }
    router.push(`/users/${userId}/posts`)
  }
  

• 方案2：使用Next.js原生对象式路由写法，避免手动拼接路径（优先推荐）
  不需要自己拼接字符串路径，直接通过pathname+query的方式传参，Next.js会自动完成合法路径的生成，完全避免双斜杠问题：

  handleClick = () => {
    // some code
    router.push({
      pathname: '/users/[userId]/posts',
      query: { userId }
    })
  }
  

  该方案为Next.js官方推荐写法，无需自己处理路径拼接逻辑，适配所有动态路由场景
• 方案3：路径自动格式化，兼容空值场景
  如果你一定要手动拼接路径，可以通过数组过滤+拼接的方式自动移除空段，避免生成连续斜杠：

  handleClick = () => {
    // some code
    // 过滤空值后再拼接，自动移除无效段
    const path = ['users', userId, 'posts'].filter(Boolean).join('/')
    router.push(`/${path}`)
  }
  

• 方案4：源头阻止无效点击
  给触发点击的按钮增加禁用状态，userId未加载完成时用户无法点击按钮，从交互层面避免触发报错：

  <button disabled={!userId} onClick={handleClick}>
    查看帖子
  </button>
  

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