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

我处理此类实现的方式是使用 styled-components 的 Extended Styles 功能。我做了一个 styled-component 绑定到 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。 Next 12.1+ with Webpack 5+ 现在可以利用 Rust-native 编译 server-side with swc & styled-components (more here).

Next/Link 刷新浅层路由页面

Next/Link refreshes page on shallow routing

routes

next.js

next-link