Material-UI Next JS 链接按钮

Question

我正在开发一个服务器端渲染的React项目，使用Next.js和Material-UI构建。我想将按钮应用到Material UI并将其与 动态路由链接相结合。

如何实现呢？我想应用React Router链接，但它与普通的不同...

我的问题是该链接需要其他属性，例如 "as" 属性。

- adir abargil

Answer 1

我的经验是（灵感来自于GitHub上的此评论）：

 <Link
     href={'/static/[dynamic]'}
     as={'/static/' + someJsString}
     passHref>
     <Button
        component="a">
        // other component ...
     </Button>
  </Link>

对于 v10+ 版本：

<Link
    href={`/static/${someJsString}`}
    passHref>
    <Button
       component="a">
       // other component ...
    </Button>
</Link>

- adir abargil

Answer 2

编辑

从next.js v10+开始，您不需要使用自动“href”解析来指定as，所以上述代码可以编写为：

<Link
     href={'/static/' + someJsString}
     passHref>
     <Button
        component="a">
        // other component ...
     </Button>
  </Link>

- guneetgstar

---

这是一个按钮吗？Material UI 样式化的按钮？ - adir abargil

@adirabargil 这是一个链接，但你也可以对按钮做同样的事情。只需删除 passHref，因为它只有在与 <a/> 标签一起使用时才有意义（这就是 Link 的用途）。你能更具体地说明你想做什么吗？例如，想在 mui-styled 按钮组件中使用 <a/> 标签，还是只想用 next/link 包装一个 Button？我都做过。请参见差异。 - guneetgstar

@adirabargil 我认为已经有一个被接受的答案涵盖了你的情况。无论如何，我想补充一点，即在 next.js v10+ 中，您不再需要添加 as 属性。 - guneetgstar