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