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>
Link
You can use this component in place of the Next link : Link.js