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

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

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

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

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

LinkButton 组件 - React Router v4 的解决方案

首先，关于这个问题的许多其他答案的说明。

⚠️ 嵌套<button>并且<a>不是有效的 html。⚠️

这里任何建议button在 React RouterLink组件中嵌套 html （或反之亦然）的答案都将在 Web 浏览器中呈现，但它不是语义、可访问或有效的 html：

<a stuff-here><button>label text</button></a>
<button><a stuff-here>label text</a></button>

☝单击以使用validator.w3.org 验证此标记☝

这可能会导致布局/样式问题，因为按钮通常不会放置在链接内。

<button>在 React Router<Link>组件中使用 html标签。

如果你只想要一个 htmlbutton标签......

<button>label text</button>

……那么，这是获得一个像 React RouterLink组件一样工作的按钮的正确方法……

使用 React Router 的withRouter HOC 将这些 props 传递给你的组件：

• history
• location
• match
• staticContext

LinkButton 零件

这是一个LinkButton供您复制/面食的组件：

// file: /components/LinkButton.jsx
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

const LinkButton = (props) => {
  const {
    history,
    location,
    match,
    staticContext,
    to,
    onClick,
    // ⬆ filtering out props that `button` doesn’t know what to do with.
    ...rest
  } = props
  return (
    <button
      {...rest} // `children` is just another prop!
      onClick={(event) => {
        onClick && onClick(event)
        history.push(to)
      }}
    />
  )
}

LinkButton.propTypes = {
  to: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired
}

export default withRouter(LinkButton)

然后导入组件：

import LinkButton from '/components/LinkButton'

使用组件：

<LinkButton to='/path/to/page'>Push My Buttons!</LinkButton>

如果您需要一个 onClick 方法：

<LinkButton
  to='/path/to/page'
  onClick={(event) => {
    console.log('custom event here!', event)
  }}
>Push My Buttons!</LinkButton>

更新：如果您正在寻找在编写上述内容后可用的另一个有趣选项，请查看此useRouter hook。

为什么不使用与按钮相同的 css 来装饰链接标签。

<Link 
 className="btn btn-pink"
 role="button"
 to="/"
 onClick={this.handleClick()}
> 
 Button1
</Link>

如果您正在使用react-router-dom并且material-ui可以使用...

import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';

<Button component={Link} to="/open-collective">
  Link
</Button>

您可以在此处阅读更多内容。