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

问题描述

使用建议的方法：

解决方案

尽管它将在网络中呈现浏览器，请注意：

⚠️将HTML 按钮嵌套在HTML a 中（反之亦然）无效的html ⚠️。
如果要将HTML语义保留给屏幕阅读器，请使用另一种方法。

以相反的方式进行换行，您将获得带有链接的原始按钮。

 < Link to = / dashboard> 
< button type =按钮> 
单击我！ 
< / button> 
< / Link> 
  

此处的按钮是HTML按钮。它也适用于从第三方库（如 Semantic-UI-React ）导入的组件。

  import {Button}从语义用户界面反应中提取
 ... 
<链接到= / dashboard> 
< Button style = {myStyle}> 
< p>点击我！< / p> 
< / Button> 
< / Link> 
  

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屋！