Material-UI Next js 链接按钮

2024-02-29

我正在开发一个使用 Next-JS 和 Material-UI 构建的服务器端渲染 React 项目。 我想应用到 Material Uibutton https://material-ui.com/api/button/-> 的与动态路线链接 https://nextjs.org/docs/api-reference/next/link#dynamic-routes

我怎样才能做到这一点?我会应用 React Router 链接 https://material-ui.com/guides/composition/#button,但是不一样...

我的问题是它需要另一个属性,例如“as”属性。


什么对我有用(灵感来自Github 上的这条评论 https://gist.github.com/herr-vogel/0b5d4f3c28f08dc6cc4a2fd4f7b4a4df#gistcomment-3070513):

 <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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Material-UI Next js 链接按钮 的相关文章

随机推荐

  • 使用PyQt5嵌入动态条形图

    我在 python 中编写了以下代码 以在生成的 GUI 中显示条形图PyQt5 import sys from PyQt5 QtWidgets import QDialog QApplication QPushButton QVBoxLa
  • Libgdx ModelBuilder.createRect 仅从一侧可见

    在我的第一个 libgdx 3D 游戏中 我现在从createBox to createRect 仅创建可见面 如果一堵墙位于另一堵墙的左侧 则其右面不可见 我正在创建 4 个模型 frontFace backFace rightFace
  • 如何在React-native ListView中过滤数据?

    我正在尝试过滤数组对象列表 然后尝试使用新的数据源在 ListView 中显示 但是 该列表并未被过滤 我知道我的过滤功能工作正常 我在console log中检查过 我正在使用 Redux 将状态映射到 prop 然后尝试过滤道具 这是错
  • SignalR 和序列化对象数组

    我是 SignalR 的新手 并且已经完成了一个简单的测试 hack 我希望用类型化对象序列化对象数组 默认情况下 SignalR 已将 Json NET 序列化器配置为不提供类型信息 我发现我可以通过以下方式在 DependencyRes
  • 无法执行操作。计算替代解决方案,可能需要一段时间 STS?

    我想问一下添加新的时候出现这个错误是什么意思Available Software Site并使用 Eclipse STS Spring Tool Suite 安装新软件Install New Software 我遇到这个问题Spring T
  • 使用 new(Integer) 与 int

    在我的 Java 课上 教授使用了类似的内容 integerBox add new Integer 10 这和刚刚做的一样吗 integerBox add 10 我用谷歌搜索了一下 但找不到一种方法或另一种方法 而且教授也很含糊 我能找到的
  • 查找特殊字符之间的文本并替换字符串

    例如我有一个字符串包含 String s test string 67 Hi 我想得到这个字符串 67 有了星星 我就可以开始替换那部分字符串了 我现在的代码如下所示 String s test string 67 Hi s s subst
  • 如何拦截和抑制 TFrame 子组件的消息?

    我需要拦截WM PASTE message https stackoverflow com questions 10158861 how to intercept detect a paste command into a tmemo 10
  • Java/JSP WEB-INF/类无法导入

    自从我不得不做一些 Java JSP 以来已经有一段时间了 我在 WEB INF classes MyClass java 中有一个 java 类 Netbeans 中的构建成功 我可以在类文件夹中看到 MyClass class 在我的j
  • MariaDB Connector/Python 需要 MariaDB Connector/C >= 3.2.4,发现版本 3.1.14

    Ubuntu 20 04 需要版本 3 2 4 否则 pip3 install mariadb 是不可能的 pip3 install mariadb gt Collecting mariadb Using cached mariadb 1
  • 摇动后停止 Android 加速计

    我想听一下摇晃声 然后完全停止加速度计并转到另一项活动 遗憾的是我没有找到任何方法来做到这一点 即使我计算一个变量并使用简单的 如果 进行检查 每次检测到震动时它总是会再次加载新的活动 请帮助我解决我的不理解 Override protec
  • 加权随机图

    假设我有一个大的二维数组 其值范围在 0 1 范围内 其中 0 表示 不可能 1 表示 极有可能 如何根据上述概率在该数组中选择一组随机点 看待问题的一种方法是 暂时 忽略您正在处理二维网格的事实 你拥有的是一组加权的项目 从这样的集合中随
  • 有没有办法使用 JQuery GetJSON 方法从外部页面获取 HTML?

    假设您正在尝试执行 jquery ajax 请求 例如 ajax url http other website com 据我了解 由于同源原则 这个请求会失败 因为URL是外部域 不过我听说过GetJSON 不遵守此原则 可以使用 JSON
  • 如何从 Python 文件更新 Qml 对象的属性?

    我想在 Qml 中显示一个矩形 并且想从我的 python 代码中更改矩形的属性 宽度 长度 实际上 Python代码中有一个套接字连接 通过该连接从另一台计算机接收宽度和长度的值 简单地说 另一个用户应该能够实时调整这个矩形 我知道如何在
  • 使用 ajax 和 webapi 进行长轮询有什么好处...它会杀死我的服务器吗?和字符串比较

    我有一个非常简单的长轮询 ajax 调用 如下所示 function poll ajax url myserver success function data do my stuff here dataType json complete
  • 如何在Python中显示小数点后100位的无理数?

    我想求小数点后 2 到 100 位的平方根 但默认情况下只显示 10 我该如何更改 decimal http docs python org library decimal html模块派上用场 gt gt gt from decimal
  • 为什么类中不允许函数模板特化?

    在stackoverflow上找到了我的许多问题的答案后 我现在遇到了一个我找不到答案的问题 我希望有人愿意帮助我 我的问题是我想在 C 类中对函数进行显式模板化 我的编译器 g 和 C 标准 14 7 3 告诉我 这种专业化必须在声明类的
  • 图像未从数据库获取

    我在我的服务器中存储了一些图像 我使用 JSON 从服务器获取远程数据 当我将图像存储在本地数据库中时它正在工作 当我使用 json url 时它不起作用 我收到 EXC BAD ACCESS 错误 code Mysof h 文件 inte
  • 如何编写自定义 python 日志处理程序?

    如何编写自定义控制台日志函数以仅在控制台窗口上输出单行日志消息 而不是附加 直到第一个常规日志记录 progress ProgressConsoleHandler console logging StreamHandler logger l
  • Material-UI Next js 链接按钮

    我正在开发一个使用 Next JS 和 Material UI 构建的服务器端渲染 React 项目 我想应用到 Material Uibutton https material ui com api button gt 的与动态路线链接