使用建议的方法： 这是结果：按钮中的链接， 注释行之间的代码

我想知道是否有一种方法可以使用react在HTML标签中包装Link元素。'react-router'button

我目前有一些Link组件可以在我的应用程序中导航页面，但是我想将该功能映射到我的HTML按钮。

尽管这将在网络浏览器中呈现，但请注意：
⚠️将html嵌套在htmlbutton中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的解决方案

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

Nest️嵌套<button>且<a>无效html。⚠️

这里给出的任何暗示将html嵌套button在React RouterLink组件中（反之亦然）的答案都将在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将这些道具传递给您的组件：

• 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钩子。

为什么不使用与按钮相同的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>

您可以在这里阅读更多内容。

从react-router v5.1.0开始，您可以使用useHistory 钩子。

该useHistory挂钩使您可以访问可用于导航的历史记录实例。

import React from 'react'
import { useHistory } from 'react-router'

export default function SomeComponent() {
  const { push } = useHistory()
  ...
  <button
    type="button"
    onClick={() => push('/some-link')}
  >
    Some link
  </button>
  ...
}

我使用Router和<Button />。否<链接/>

<Button onClick={()=> {this.props.history.replace('/mypage')}}>
   HERE
</Button>

⚠️不，将html嵌套在htmlbutton中a（反之亦然）不是有效的html

对于使用React 16.8+（挂钩）和React Router 5寻找解决方案的任何人：

您可以使用带有以下代码的按钮来更改路线：

<button onClick={() => props.history.push("path")}>

React Router为您的组件提供了一些支持，包括历史记录上的push（）函数，其功能与<Link to ='path'>元素非常相似。

您无需使用高阶组件“ withRouter”包装组件即可访问这些道具。

使用样式化的组件可以轻松实现

首先设计一个样式按钮

import styled from "styled-components";
import {Link} from "react-router-dom";

const Button = styled.button`
  background: white;
  color:red;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid red;
  border-radius: 3px;
`
render(
    <Button as={Link} to="/home"> Text Goes Here </Button>
);

检查样式化组件的主页以获取更多信息

React Router版本6的更新：

这里的各种答案就像反应路由器演进的时间表line

使用react-router v6中的最新钩子，现在可以通过useNavigate钩子轻松完成此操作。

import { useNavigate } from 'react-router-dom'      

function MyLinkButton() {
  const navigate = useNavigate()
  return (
      <button onClick={() => navigate("/home")}>
        Go Home
      </button>
  );
}

许多解决方案都专注于使事情复杂化。

对于与链接到应用程序其他位置的按钮一样简单的事情，使用withRouter是一个非常长的解决方案。

如果您要使用SPA（单页应用程序），我发现最简单的答案是与按钮的等效className一起使用。

这样可以确保您保持共享状态/上下文，而无需像这样完成整个应用程序的重新加载。

import { NavLink } from 'react-router-dom'; // 14.6K (gzipped: 5.2 K)

// Where link.{something} is the imported data
<NavLink className={`bx--btn bx--btn--primary ${link.className}`} to={link.href} activeClassName={'active'}>
    {link.label}
</NavLink>

// Simplified version:
<NavLink className={'bx--btn bx--btn--primary'} to={'/myLocalPath'}>
    Button without using withRouter
</NavLink>