12.12.2024

Usando Botões HTML em vez de Links no React Router

Resposta Rápida

Transformar o componente Link do react-router-dom em um botão é simples, se você aplicar estilos de botão diretamente ao componente Link.

import { Link } from 'react-router-dom';
import './Button.css'; // Aplicando estilos de botão

...

<Link to="/sua-rota" className="btn">
  Clique Aqui
</Link>

...

/* Button.css */
.btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

Agora o componente Link se parece com um botão.

Análise Detalhada: Controle e Semântica

Navegação com useHistory

Para implementar navegação programática com a aparência de botão, é recomendado usar um botão do React em combinação com o hook useHistory.

import { useHistory } from 'react-router-dom';

const Botão = ({ to }) => {
  const history = useHistory();

  const navegar = () => {
    history.push(to); // Clique para navegar 🚀
  };

  return <button onClick={navegar}>Clique Aqui</button>;
};

O método push torna a transição do link uma ação intencional e fornece opções para roteamento condicional e análises.

Segurança em Primeiro Lugar

Seguir os princípios de acessibilidade e usar elementos HTML semânticos e papéis ARIA adequados melhora a usabilidade do site para usuários com limitações:

<Link to="/sua-rota" className="btn" role="button" aria-label="Ir para o destino">
  Clique Aqui
</Link>

Abordagem Baseada em Componentes

Componente Universal LinkButton

Para simplificar o uso repetido da funcionalidade, crie um componente LinkButton:

import { Link } from 'react-router-dom';

const LinkButton = ({ className, to, children }) => (
  <Link to={to} className={`btn ${className}`} role="button">
    {children} // Elementos filhos do componente `LinkButton` estão aqui 👶
  </Link>
);

export default LinkButton;

O LinkButton garante integridade semântica e um código limpo dentro de um único componente.

E quanto ao Estilo?

Quem Cria Sua Imagem?

Usar Link como um botão ajuda a manter um design estiloso e consistente em todo o aplicativo:

/* Estilos do botão */
.link-as-button {
   ...
}

<Link to="/sua-rota" className="link-as-button">
  Clique Aqui
</Link>

Toque do Designer: Material-UI

Para integração com o Material-UI, especifique Link na propriedade component:

import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

<Button component={Link} to="/destino">
  Estiloso e Funcional! 👠
</Button>

Visualização

Carros e chaves raramente são mencionados juntos, mas ilustram vividamente uma analogia:

• 🚗 – Este é nosso botão; sem a chave, ele não vai a lugar algum.
• 🔑 – Este é o Link que nos permite começar a nos mover.

No código, nós "envelopamos" o Link em um <button>:

<button>🔑🚗 <Link to="/rota">Vamos Lá!</Link></button>

Quando o carro começa a se mover ao pressionar o botão:

Depois: 🚗💨 (O carro está se movendo após o botão ser pressionado)
// Da mesma forma, a combinação do botão e do link nos leva a uma nova rota.

Recomendações Práticas

Foco no HTML

Envelopar um Link em um button muda sua aparência, mas é crucial considerar a acessibilidade e a usabilidade. Use ferramentas como validator.w3.org para garantir que seu HTML seja válido.

Experimente com Hooks

O hook useRouter oferece uma abordagem compacta que simplifica o trabalho com roteamento em componentes funcionais.

Filtragem de Propriedades

Em um componente LinkButton personalizado, remova atributos não relacionados à funcionalidade do botão para manter o código do componente limpo:

<Link {...otherProps} to={to} className={`btn ${className}`} role="button">
  {children}
</Link>

Recursos Úteis

1. Home v6.21.3 | React Router — a documentação mais recente do React Router.
2. Botão ou Link | Introdução à Acessibilidade — uma discussão sobre considerações de acessibilidade ao escolher entre um botão e um link.
3. Guia Completo de Links e Botões | CSS-Tricks — dicas de estilo para a criação adequada de botões e links.
4. GitHub - css-modules/css-modules: Documentação sobre css-modules — usando CSS Modules no React para limitar a visibilidade dos estilos.
5. Listas e Chaves – React — a importância da propriedade key ao trabalhar com componentes de lista no React.

Video

Navigation