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. Я делаю стилизованный компонент, привязанный к 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+ с Webpack 5+ теперь может использовать собственную компиляцию Rust на стороне сервера с swc& styled-components (подробнее здесь ).