如何修复 Next.js 错误“取消渲染路由”？

Question

我正在尝试链接到 div id，但收到此错误：Error: Cancel rendering route

这似乎是双重链接的问题。

我已经使用了useRouter[ pushslug]，因为NextLink并且<a>不会导致地图循环中的重新渲染，我用它来渲染与（endsWith）匹配的内容asPath: /posts/post-id/the-slug

  const router = useRouter();
  const { asPath } = useRouter();
  const {
    query: { id },
  } = useRouter();

  const handleHref = (link) => {
    router.push(link);
  };

这有效，链接到也重新渲染地图循环的 slugs。

  <ButtonLink
    onClick={() =>
      handleHref(
        `/posts/${id}/${String(item.slug).replace(/ /g, "-")}`
      )
    }
  >
    Example
  </ButtonLink>

现在，当尝试使用与or/posts/post-id/the-slug#div-id相同的方法链接到 div id 时，我收到错误。useRouterNextLink

  <Link href={`#${String(sect.section).replace(/ /g, "-")}`} passHref>
    <a>
      <Text>Example</Text>
    </a>
  </Link>

  //or

  <ButtonLink
    onClick={() =>
      handleHref(`/posts/${id}/${String(
        item.slug
      ).replace(/ /g, "-")}#${String(
        sect.section
      ).replace(/ /g, "-")}`)
    }
  >
    Example
  </ButtonLink>

编辑：第一次单击地图循环中的一个 ButtonLink 后，我无法从其他按钮推送新的哈希值。

<div>
  <ButtonLink
    onClick={() =>
      handleHref(`/posts/${id}/${String(item.slug).replace(/ /g, "-")}`)
    }
  >
    Example
  </ButtonLink>
    
  {posts.map((item) => {
    if (
      asPath.startsWith(
        `/posts/${id}/${String(item.slug).replace(/ /g, "-")}`
      )
    )
      return (
        <div key={item.id}>
          <div>
            {item.section.map((sect) => {
              <div key={sect.id}>
                <ButtonLink
                  onClick={() =>
                    handleHref(
                      `#${String(sect.section).replace(/ /g, "-")}`
                    )
                  }
                >
                  {sect.name}
                </ButtonLink>
              </div>;
            })}
          </div>
        </div>
      );
  })}
</div>

Answer 1

我使用 Link 时遇到同样的错误，如下所示：

 const onSignOut = (event:any) => {
    auth.signout();
 }
 ...
 <Link href='#'  onClick={onSignOut} 

auth.signout()做一个隐式的router.push('/login')

我认为就我而言，错误是因为它试图同时路由到#和。/login

我的解决方案是添加一个preventDefault点击处理程序：

const onSignOut = (event:any) => {
    event.preventDefault();
    auth.signout();
}