-1

Segundo a documentação, é possível renderizar um elemento customizado no Link do React-Router-Dom:

If you would like utilize your own navigation component, you can simply do so by passing it through the component prop.

Tentei renderizar um web component no lugar do link, porém o estilo do meu web component não está sendo carregado no lugar do Link, está carregando apenas uma <a>:

<Link
    to={ROUTE.REGISTRY}
    component={() =>
      (<my-webcomponent-link />
      )}
>
    Registrar
</Link>

1 Resposta 1

1

Para renderizar um componente customizado usando o Link do React-router-dom, basta passar seu componente como um "filho" dele:

<Link
    to="url-que-quer-acessar"
    style={{ textDecoration: 'none' }}
>
    <SeuComponente> Registrar </SeuComponente>
</Link>

Colocando style={{ textDecoration: 'none' }} faz com que a estilização da tag não seja mais aplicada.

Caso a mensagem "registrar" deva ser inserida dentro do seu componente, em algum lugar especifico, você pode passar ela como sendo "filha" do seu componente, e acessá-la por props.children().

Exemplo -> Digamos que SeuComponente é apenas uma div com o texto:

export default function SeuComponente(props) {
    // props.children é uma propriedade que o react passa automaticamente
    // tudo que você insere dentro do seu componente quando chama ele
    // no nosso caso, foi o texto "Registrar"
    return (<div>{props.children}</div>);
}
2
  • O estilo do <a> do Link ainda é aplicado =[ Commented 28/05/2021 às 20:04
  • Nesse caso, será necessário adicionar: style={{ textDecoration: 'none' }} no componente Link, atualizei a resposta para ver exatamente onde colocar
    – lauanS
    Commented 29/05/2021 às 5:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .