Menu
I am working on a Server-Side-Rendering React Project, built with Next-JS and Material-UI. and i want to apply To Material Ui button -> the Link with Dynamic routes
how can i do this? i would apply React Router Link,but it is different...
my problem is that it has another properties required such as "as" property.
798
Rendering a material UI button is very easy, just wrap the button component with the nextjs link component and make sure you use passHref property on the link component. passHref must be used every time you use a custom component inside the Link component.
This blog post refers to Material-UI V4 but it should work with the V5 also. I've created a template repository for using Next.js with Material UI which you can use as a starting point. Link component is a magic component of next.js framework, that does the routing both client-side and server-side (properly rendering links for SEO purposes).
Go straight to Material UI's Next.js example project on GitHub. There's a Link.js component that is well developed and flexible, and worked for me without having to make additional changes. Copy that and add it to your repo.
Go straight to Material UI's Next.js example project on GitHub. There's a Link.js component that is well developed and flexible, and worked for me without having to make additional changes.
what worked for me (inspired from this comment in Github):
<Link
href={'/static/[dynamic]'}
as={'/static/' + someJsString}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
for version v10+:
<Link
href={`/static/${someJsString}`}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
Edit
Starting next.js v10+ you don't need to specify as with Automatic `href` Resolution so the above code can be written as:
<Link
href={'/static/' + someJsString}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
