在点击和页面加载之前验证路由答案

【问题标题】：Validate route on click and before the page-load在点击和页面加载之前验证路由
【发布时间】：2021-04-16 12:09:52
【问题描述】：

在 Next.js 中，如何在加载之前验证路由？

根据API docs，routeChangeStart是在路由更改之前触发的，但是一旦触发，我无法取消该事件。

  useEffect(() => {
    events.on("routeChangeStart", routerChangeHandler);
    return (() => events.off("routeChangeStart", routerChangeHandler));
  });

  const routerChangeHandler = (url) => {
    if(/* check something */){
      // stop the new page load and stay on the page
      return false;
    }
  };

【问题讨论】：

请提供您的整个文件，您确定您访问的是router.events吗？

标签： javascript reactjs next.js url-routing

【解决方案1】：

我认为你应该这样做：Next JS: Warn User for Unsaved Form before Route Change

【讨论】：

【解决方案2】：

你可以尝试抛出错误来取消导航：

  events.on('routeChangeStart', () => {
    throw new Error('AbortError');
  });

您也可以尝试发送routeChangeError:

 events.emit('routeChangeError');

【讨论】：