Skip to content
Links

Links

The Link component allows you to easily customize anchor elements with your theme colors and typography styles.

Simple links

The Link component is built on top of the Typography component. You can leverage its properties.

However, the Link has different default properties than the Typography:

  • 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 Typograpy component.

Accessibility

Security

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.

Third-party routing library

One common use case is to perform the navigation on the client only, without doing a .html round-trip with the server. The Link component provides a property to handle this use case: component.

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@material-ui/core/Link';

// required for react-router-dom < 6.0.0
// see https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678
const AdapterLink = React.forwardRef((props, ref) => <RouterLink innerRef={ref} {...props} />);

const CollisionLink = React.forwardRef((props, ref) => (
  <RouterLink innerRef={ref} to="/getting-started/installation/" {...props} />
));

export default function LinkRouter() {
  return (
    <Router>
      <div>
        <Link component={RouterLink} to="/">
          Simple case
        </Link>
        <br />
        <Link component={AdapterLink} to="/">
          Ref forwarding
        </Link>
        <br />
        <Link component={CollisionLink}>Avoids props collision</Link>
      </div>
    </Router>
  );
}

Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in our component property guide.