我尝试链接到一个div id，但收到以下错误：Error: Cancel rendering route
这似乎是双重链接的问题。
我已经在[slug]中使用了useRouter to push，因为NextLink和<a>不会导致map循环中的重新呈现，我使用map循环来呈现与asPath: /posts/post-id/the-slug匹配（endsWith）的内容

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

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

这工作，链接到也重新渲染贴图循环的插件。

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

现在，当尝试使用与useRouter或NextLink相同的方法链接到div id /posts/post-id/the-slug#div-id时，我得到了错误。

<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>

编辑：在第一次点击Map循环中的一个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>