将 react-router 链接包装在 html 按钮中 [英] Wrapping a react-router Link in an html button

问题描述

使用建议的方法:

解决方案

虽然这将在 Web 浏览器中呈现，请注意:
⚠️在 html a 中嵌套 html button(或反之亦然)是无效的 html⚠️.如果您想将 html 语义保留给屏幕阅读器，请使用另一种方法.

以相反的方式包装，您将获得带有链接的原始按钮.无需更改 CSS.

 <按钮类型=按钮">点我！</链接>

这里的按钮是 HTML 按钮.它也适用于从 Semantic-UI-React 等第三方库导入的组件.

 import { Button } from 'semantic-ui-react'...<链接到=/仪表板"><按钮样式={myStyle}><p>点击我！</p></按钮></链接>

Using suggested method: This is the result: A link in the button, Code in between comment lines

I was wondering if there is a way to wrap a Link element from 'react-router' in an HTML button tag using react.

I currently have Link components to navigate pages in my app, but I would like to map that functionality to my HTML buttons.

解决方案

While this will render in a web browser, beware that:
⚠️Nesting an html button in an html a (or vice-versa) is not valid html ⚠️. If you want to keep your html semantic to screen readers, use another approach.

Do wrapping in the reverse way and you get the original button with the Link attached. No CSS changes required.

 <Link to="/dashboard">
     <button type="button">
          Click Me!
     </button>
 </Link>

Here button is HTML button. It is also applicable to the components imported from third party libraries like Semantic-UI-React.

 import { Button } from 'semantic-ui-react'
 ... 
 <Link to="/dashboard">
     <Button style={myStyle}>
        <p>Click Me!</p>
     </Button>
 </Link>

这篇关于将 react-router 链接包装在 html 按钮中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！