How to define the component to be rendered in the React-Router-Dom Link?

Question

According to the documentation, it is possible to render a custom element in the React-Router-Dom Link:

If you would like use your Own navigation Component, you can Imply do so by Passing it through the Component prop.

I tried to render a web Component in place of the link, but the style of my web Component is not being loaded in place of the Link, it is loading only one <a>:

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

Answer 1

To render a custom component using the React-router-dom Link, simply pass your component as a "child" of it:

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

Putting style={{ textDecoration: 'none' }} causes the stylization of the tag is no longer applied.

If the "register" message should be inserted inside your component, somewhere specific, you can pass it as being "daughter" of your component, and access it by props.children().

Example -> Let’s say Your component is just a div with the text:

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>);
}