Next.js 链接组件阻止默认操作答案

【问题标题】：Next.js Link Component Prevent default actionNext.js 链接组件阻止默认操作
【发布时间】：2019-04-09 06:40:56
【问题描述】：

使用 Next.js 并且我有一个显示为按钮的链接组件，但是我希望用户只有在满足某些条件时才能导航到 /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;
     }
  }

【问题讨论】：

我认为您想将按钮移出 Link 组件并在 handleClick 事件中使用历史 API 推送登录。您将其移出的原因是因为 Link 组件正在执行登录路由

标签： reactjs next.js

【解决方案1】：

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

从外观上看，您将要导入路由器，然后添加Router.push('/login')，例如：

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

【讨论】：