在html按钮中包装react路由器链接

使用建议的方法： ,

我想知道是否有一种方法可以使用react将

'react-router'

中的

链接

元素包装到HTML

按钮

标记中

我目前有

Link

组件在我的应用程序中导航页面，但我想将该功能映射到我的HTML按钮

---

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

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

按钮1

⚠️ 不，

虽然这将在web浏览器中呈现，但请注意：
⚠️ ⚠️. 如果您想将html语义保留给屏幕阅读器，请使用另一种方法

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

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

点击我！

这里的按钮是HTML按钮。它也适用于从第三方库导入的组件，如语义UI React

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

从“语义ui反应”导入{Button}
... 
点击我

LinkButton

组件-React路由器v4的解决方案 首先，关于这个问题的许多其他答案的说明

⚠️ 嵌套

和

HOC将这些道具传递给组件：


历史记录
位置
匹配
staticContext


LinkButton
组件
这里有一个
LinkButton
组件供您复制/编辑：

//文件：/components/LinkButton.jsx
从“React”导入React
从“道具类型”导入道具类型
从“react router”导入{withRouter}
常量链接按钮=（道具）=>{
常数{
历史
位置，
匹配，
静态上下文，
到
onClick，
// ⬆ 过滤掉“巴顿”不知道该怎么处理的道具。
休息
}=道具
返回(
{
onClick&&onClick（事件）
历史。推（到）
}}
/>
)
}
LinkButton.propTypes={
收件人：PropTypes.string.isRequired，
子项：PropTypes.node.isRequired
}
使用路由器导出默认值（链接按钮）

然后导入组件：

从“/components/LinkButton”导入链接按钮

使用组件：

按我的按钮！

如果需要onClick方法：

{
console.log（'customevent here！'，event）
}}
>按我的按钮！

更新：如果您正在寻找上述内容编写后提供的另一个有趣的选项，请查看此选项。
我使用路由器和。否

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

{this.props.history.replace（'/mypage'）}>
在这里
使用样式化组件，可以轻松实现这一点

首先设计一个样式化的按钮

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 dom”导入{Link}；
const Button=styled.Button`
背景：白色；
颜色：红色；
字号：1em；
边缘：1米；
填充物：0.25em 1米；
边框：2倍纯红；
边界半径：3px；
`
渲染(
这里有文字
);

如果您使用的是
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 dom'导入{Link}
从“@material ui/core/Button”导入按钮；
链接

您可以阅读更多内容。
许多解决方案都专注于使事情复杂化

使用withRouter是一个很长的解决方案，只需一个按钮就可以链接到应用程序中的其他地方

如果你选择S.p.A.（单页应用程序），我发现最简单的答案就是使用按钮的等效类名

这可确保您在维护共享状态/上下文的同时，不会像使用一样重新加载整个应用程序

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>

从'react router dom'导入{NavLink}；//14.6K（gzipped:5.2K）
//其中link.{something}是导入的数据
{link.label}
//简化版：
不使用withRouter的按钮
对于使用React 16.8+（挂钩）和React路由器5寻找解决方案的任何人：

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

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

props.history.push（“路径”）}>

React Router为您的组件提供了一些道具，包括history上的push（）功能，其工作原理与元素非常相似

您不需要使用更高阶的组件“withRouter”来包装您的组件来访问这些道具。
您可以使用
useHistory
hook

useHistory
钩子允许您访问
您可以使用来导航

从“React”导入React
从“react router dom”导入{useHistory}
导出默认函数SomeComponent（）{
const{push}=useHistory（）
...
推送（'/some link'）}
>
某些链接
...
}
React路由器版本6的更新：

这里的各种答案就像react路由器的发展时间表我建议您使用
链接
组件上的
组件
道具。使用此功能，您可以从React-Rotuer的角度有效地使任何组件充当
a
组件。例如，您可以创建自己的“按钮”组件，然后利用它


const MyButton = () => {
    return <button>Do something with props, etc.</button>
}

<Link to="/somewhere" component={MyButton}>Potentially pass in text here</Link>


常量MyButton=（）=>{
用道具等做某事。
}
可能在此处传递文本
于是我尝试了这个方法，我得到的是一个按钮，中心有一个小的可点击链接，可以实现它的功能。但是，单击按钮上的任何其他位置，但直接链接没有任何作用。您可以使用CSS设置按钮样式，以确保其大小正确。例如，将其设置为
宽度
和
高度
。可以对按钮标记使用相同的内联样式。或者您可以使用许多“JS中的css”库中的一个。我更喜欢
样式化组件
。信息技术
<button onClick={() => props.history.push("path")}>

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

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


const MyButton = () => {
    return <button>Do something with props, etc.</button>
}

<Link to="/somewhere" component={MyButton}>Potentially pass in text here</Link>