将 Next.js Link 组件与 Material UI 按钮和菜单项结合使用

更新

1. 这篇博文指的是 Material-UI V4，但它也适用于 V5。
2. 我已经创建了一个使用 Next.js 和 Material UI 的模板存储库，您可以将其用作起点。

演示：https://material-pwa.vercel.app/

存储库：https：//github.com/ivandotv/nextjs-material-pwa

Link 组件是 next.js 框架的一个神奇组件，它负责客户端和服务器端的路由（为了 SEO 目的正确呈现链接）。

Material UI是实现Google 材料设计系统最受欢迎的框架。
由于这两个框架都需要特定的 HTML 结构来渲染组件，因此将它们一起使用并不像看起来那么简单，但幸运的是，它其实并不难。

在本文中，我将向您展示如何正确地将 Material UI 按钮和菜单项渲染为 NextJS 链接。

渲染材料 UIbutton非常容易，只需用 nextjs 链接组件包装按钮组件并确保passHref在链接组件上使用属性。

<Link href="/about" passHref>
  <Button variant="contained" color="secondary">About</Button>
</Link>

passHref每次在组件内部使用自定义组件时都必须使用Link。如果没有它，当您在客户端测试代码时，看起来一切正常，因为Link组件可以正确路由链接，但是生成的a标签没有属性href，因此网站爬虫将看不到任何链接，这会对您的 SEO 产生负面影响。
它看起来有效的原因是link组件有一个值href，它只需监听其子组件上的点击事件，然后进行路由。

您可以通过在浏览器中禁用 javascript 并尝试导航 nextjs 应用程序来确认这一点，您会发现链接不起作用。

使用 ListItem 组件

ListItem组件用于各种材料 UI 菜单内部，并且设置起来有点棘手，因为组件生成的 HTML 结构比简单的按钮组件更复杂。

在网上，你会发现很多解决方案都在使用高阶组件，并到处传递 props。然而，解决方案其实很简单，ListItem组件本身的 API 就提供了这个功能。
我们需要做的就是将ListItem组件的底层元素改为一个a标签。我们可以利用component的属性来实现这一点ListItem。

<Link href="/about" passHref>
 <ListItem button component="a" onClick={onClick}>
  <ListItemText>About</ListItemText>
 </ListItem>
</Link>

就是这样，链接将在客户端起作用，并且将在服务器端正确呈现。