Next/Link 刷新浅层路由页面
Next/Link refreshes page on shallow routing
我有一个 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 更改并触发回调。我做错了什么?
我处理此类实现的方式是使用 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).
我有一个 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 更改并触发回调。我做错了什么?
我处理此类实现的方式是使用 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).