Next.js Link 组件阻止默认操作

Question

使用 Next.js，我有一个显示为按钮的 Link 组件，但是我希望用户只有在满足某些条件（已验证）时才能导航到 /login .当前正在调用 handleClick 函数并返回 false，它应该如此，但是无论如何应用程序都会导航。

我做错了什么？

运行 next.js V 7.0.2

非常感谢。

  <Link href="/login"> 
  <button onClick={() => {handleClick(event)}}>Buyer</button> 
  </Link>

  function handleClick(event)
  {
     if(verified == false)
     {
         event.preventDefault();
         return false;
     }
     else
     {
         return true;
     }
  }

Answer 1

关于我的评论，我刚刚查看了 next.js 的文档，它给出了一个 DOM 元素示例和一个更改到另一个页面的点击事件。 https://github.com/zeit/next.js/#imperatively

看起来你会想要导入路由器然后添加Router.push('/login')像：

    function handleClick(event)
  {
     if(verified) {
         Router.push('/login')
     }
  }

Next.js Link 组件阻止默认操作

Next.js Link Component Prevent default action

reactjs

next.js