Skip to main content
Completando a resposta informando como ocultar a estilização padrão do Link
Fonte Link

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

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"
>
    <SeuComponente> Registrar </SeuComponente>
</Link>

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

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

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"
>
    <SeuComponente> Registrar </SeuComponente>
</Link>

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