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

Question

使用建议的方法： This is the result: A link in the button， Code in between comment lines

我想知道是否有办法使用react将Link元素从'react-router'包裹在HTML 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>

虽然这将在网络浏览器中呈现，但请注意：
⚠️Nesting an html button in an html a (or vice-versa) is not valid html

Answer 2

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

首先，请注意这个问题的许多其他答案。

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

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

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

☝Click to validate this markup with validator.w3.org☝

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

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

如果您只想要一个html button代码......

<button>label text</button>

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

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

• history
• location
• match
• staticContext

LinkButton组件

这是一个LinkButton组件供您复制/ pasta ：

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

Answer 4

我使用路由器和＆lt;按钮/取代。不是＆lt;链路/＆GT;

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

Answer 5

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

Answer 6

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

首先设计一个样式按钮

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

检查styled component's home了解更多

Answer 7

是

您可以这样做：

const WrappedLink = () => {
  return (
    <button>
      <Link style={{display: 'block', height: '100%'}} .... />
    </button>
  )
}

然后使用<WrappedLink />代替<Link />。

虽然这将在网络浏览器中呈现，但请注意：
⚠️Nesting an html button in an html a (or vice-versa) is not valid html

Answer 8

如果您使用的是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>

您可以阅读更多here。

Answer 9

自react-router v5.1.0起，您可以使用useHistory hook 。

  

通过useHistory挂钩，您可以访问历史记录实例，   您可以用来导航。

import { useHistory } from 'react-router'
...
const { push } = useHistory()
...
<button
  type="button"
  onClick={() => push('/some-link')}
>
  Some link
</button>

Answer 10

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

对于像链接到应用程序其他位置的按钮之类的简单操作，使用withRouter是一个非常长的解决方案。

如果您要参加S.P.A. （单页应用程序），我找到的最简单的答案是与按钮的等效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>

Answer 11

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

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

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

反应路由器为组件提供了一些道具，包括历史记录上的 push（）功能，其功能与<链接到='path'>元素。

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

Answer 12

我建议您在 component 组件上使用 Link 道具。使用它，从 React Rotuer 的角度来看，您可以有效地将任何组件表现为 a 组件。例如，您可以创建自己的“按钮”组件，然后使用它。

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

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

Answer 13

使用 react-router-dom 和函数

在 React 中，您可以通过应用 react-router-dom 调用来使用 useHistory...

- 首先

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

- 其次 在您的函数中...编写一个函数来处理按钮点击

const handleButtonClick = () => {
    history.push('/YourPageLink')
  }

- 最后

<button onClick={handleButtonClick} className="CSS">
   Button Text
</button>