Material-UI - Navigation with Next Link


How to integrate the routing system of next into material-ui

The integration with third party library is documented here



The forward Ref component

with a forwarding-ref

import React from 'react';
import Link, { LinkProps } from 'next/link';
import Button, { ButtonProps } from '@material-ui/core/Button';

 * A component to be use in the button attritbute 'component'
 * to transform a button is a link
export type ButtonLinkProps = Omit<ButtonProps, 'href' | 'classes'> &
    Pick<LinkProps, 'href' | 'as' | 'prefetch'>

const ButtonLink = React.forwardRef<ButtonLinkProps, any>(
    ({ href, as, prefetch, ...props }, ref) => (
        <Link href={href} as={as} prefetch={prefetch} passHref>
            <Button ref={ref} {...props} />

ButtonLink.displayName = 'ButtonLink'

export default ButtonLink;


Import the ButtonLink and pass it in the component attribute

import ButtonLink from './buttonLink.tsx'

   Next Question

You can use this component in place of the Next link : Link.js

Documentation / Reference

Share this page:
Follow us:
Task Runner