Enlaces

Los Enlaces permiten personalizar fácilmente los enlaces con los colores de su Tema y estilos de tipografía.

Enlaces simples

Los enlaces estan contruidos sobre el componente Tipografia. Puedes aprovechar sus propiedades.

<Typography className={classes.root}>
  <Link href="#" onClick={preventDefault}>
    Link
  </Link>
  <Link href="#" onClick={preventDefault} color="inherit">
    {'color="inherit"'}
  </Link>
  <Link href="#" onClick={preventDefault} variant="body2">
    {'variant="body2"'}
  </Link>
</Typography>

Sin embargo, los Enlaces tienen propiedades por defecto distintas a las de las Tipografias:

• color="primary" as the link needs to stand out.
• variant="inherit" as the link will, most of the time, be used as a child of a Typography component.

Seguridad

When you use target="_blank" with Links, it is recommended to always set rel="noopener" or rel="noreferrer" when linking to third party content.

• rel="noopener" prevents the new page from being able to access the window.opener property and ensures it runs in a separate process. Without this, the target page can potentially redirect your page to a malicious URL.
• rel="noreferrer" has the same effect, but also prevents the Referer header from being sent to the new page. ⚠️ Removing the referrer header will affect analytics.

Librería externa de routing

Un uso comun es realizar la navegacion solo en el cliente, sin realizar el viaje HTTP Ida-Vuelta al servidor. El componente Link contiene la propiedad para manejar este uso: component.

Here is an integration example with react-router.

Accesibilidad

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#link)

• Al proporcionar el contenido del enlace, evitar descripciones genéricas como "haga clic aquí" o "ir a". En su lugar, utilice descripciones específicas.
• Para una mejor experiencia de usuario, los enlaces deben sobresalir del texto en la página.
• Si un enlace no tiene un significativo href, se debe representarse mediante un <button> elemento.

<Link
  component="button"
  variant="body2"
  onClick={() => {
    console.info("I'm a button.");
  }}
>
  Button Link
</Link>

API

• <Link />