在html按钮中包含react-router链接

Question

使用建议的方法: 结果如下:按钮中的链接, 注释行之间的代码

我想知道是否有办法使用react 包装HTML 标签中的Link元素.'react-router'button

我目前Link在我的应用程序中有导航页面的组件,但我想将该功能映射到我的HTML按钮.

Answer 1

以相反的方式进行包装,并获得带有链接的原始按钮.无需更改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>

Answer 2

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

将一个html嵌套<button>在一个React Router <a>组件中(反之亦然)可以工作......但是这是一个hack ...而且你得到了html嵌套,没有人应该写:

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

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

你真正想要的HTML只是一个button标签:

<button>label text</button>

这是获得像React Router的Link组件一样工作的按钮的正确方法......

使用React Router的withRouter HOC将这些道具传递给您的组件:

• <button>
• <Link>
• button
• Link

history 零件

这是location你复制/ 面食的一个组件:

// 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>

Answer 3

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

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

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

Answer 4

自react-router v5.1.0以来，您可以使用useHistory 钩子。

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

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>
  ...
}

注意：请注意，这种方法可以回答问题，但无法像@ziz194 在他们的评论中所说的那样访问

但是这是不可访问的，因为按钮不是标签，因此它没有链接行为，例如在新页面中打开链接。它对于屏幕阅读器也不是最佳选择。

Answer 5

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

Answer 6

我使用Router和<Button />.没有<Link />

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

Answer 7

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

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

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

React Router 为您的组件提供了一些道具，包括历史上的push()函数，它的工作方式与 < Link to='path' > 元素非常相似。

你不需要用高阶组件“withRouter”包装你的组件来访问这些道具。

Answer 8

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

首先设计一个样式按钮

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>
);

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

Answer 9

如果您正在使用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>

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

Answer 10

React Router 版本 6 的更新：

这里的各种答案就像一个反应路由器进化的时间线

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

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

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