Material-UI Next js 链接按钮答案

【问题标题】：Material-UI Next js Link ButtonMaterial-UI Next js 链接按钮
【发布时间】：2020-08-05 08:09:44
【问题描述】：

我正在开发一个使用 Next-JS 和 Material-UI 构建的服务器端渲染 React 项目。我想申请 Material Ui button -> Link with Dynamic routes

我该怎么做？我会apply React Router Link，但它是不同的......

我的问题是它需要其他属性，例如“as”属性。

【问题讨论】：

【解决方案1】：

什么对我有用（灵感来自 this comment in 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>

【讨论】：

【解决方案2】：

编辑

从next.js v10+ 开始你不需要指定as 和Automatic `href` Resolution 所以上面的代码可以写成：

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

【讨论】：

这是一个按钮吗？材质 ui 样式的按钮？
@adirabargil 这是Link，但您可以对按钮执行相同操作。只需删除passHref 因为它只有在与<a/> 标签一起使用时才会有意义（Link 的用途）。你能更具体地说明你想做什么吗？例如想在mui-styled 按钮组件中使用<a/> 标记，还是只想用next/link 包装Button？我都做过。请参阅diff。
@adirabargil 我认为接受的答案已经涵盖了您的情况。无论如何，我想补充一点，您不再需要添加 as 道具开始 next.js v10+