routes - Next/Link 刷新浅层路由页面

Question

我有一个Link：

<Link href={href} passHref shallow>
      <StyledLink
        $active={active}
        $disabled={disabled}
        onClick={() => passBackNumber(number)}
      >
        {number}
      </StyledLink>
</Link>

StyledLink我的styled.a元素在哪里，并onClick传递刚刚单击的数字。我发现如果你想使用<Link/>+styled-components你需要使用passHref. 但问题是即使我指定shallow了，页面仍然在刷新。我只想通过 url 更改和触发回调。我做错什么了？

Answer 1

我处理此类实现的方式是使用样式组件的扩展样式功能。我制作了一个与 Next 相关联的样式组件<Link>：

const StyledLink = styled(Link)`
  align-items: center;
  display: flex;
  justify-content: space-between;
  
  a, a:focus, a:visited, a:hover {
    color: black;
    text-decoration: none;
  }
`

在渲染函数中，我会将onClick事件直接应用到嵌套<a>标签中，如下所示：

<StyledLink href="#">
  <a onClick={ () => passBackNumber(number) }>
</StyledLink>

根据您使用的 Next 版本，您可能不需要passHref或shallow不再需要。带有 Webpack 5+ 的 Next 12.1+ 现在可以利用带有swc& styled-components 的 Rust-native 编译服务器端（更多在这里）。