Material-UI - Navigation with Next Link

About

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

The integration with third party library is documented here

Example

Button

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} />
        </Link>
    )
)

ButtonLink.displayName = 'ButtonLink'

export default ButtonLink;

Usage

Import the ButtonLink and pass it in the component attribute

import ButtonLink from './buttonLink.tsx'

<Button
    component={ButtonLink}
    href="about"
   >
   Next Question
</Button>

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

Documentation / Reference


Powered by ComboStrap