Ответ 1

⚠️ Нет, вложение html- button в html a (или наоборот) не является действительным html

Ответ 2

Выполните перенос в обратном порядке, и вы получите оригинальную кнопку с прикрепленной ссылкой. Никаких изменений 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>

Хотя это будет отображаться в веб-браузере, имейте в виду, что:
⚠️ Вложение html- button в html a (или наоборот) не является действительным html

Ответ 3

Компонент LinkButton - решение для React Router v4

Во-первых, заметка о многих других ответах на этот вопрос.

⚠️ Вложение <button> и <a> недопустимо в формате HTML. ⚠️

Любой ответ, предлагающий вложить html- button в компонент React Router Link (или наоборот), будет отображаться в веб-браузере, но это не семантический, доступный или недействительный html:

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

☝ Нажмите, чтобы подтвердить эту разметку с помощью validator.w3.org ☝

Это может привести к проблемам макета/стиля, поскольку кнопки обычно не размещаются внутри ссылок.

Использование HTML- <button> с компонентом React Router <Link>.

Если вы хотите только тег HTML button...

<button>label text</button>

... тогда вот правильный способ получить кнопку, которая работает как компонент React Routers Link...

Используйте React Routers withRouter HOC, чтобы передать эти реквизиты вашему компоненту:

• history
• location
• match
• staticContext

Компонент LinkButton

Вот компонент 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' doesnt 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>

Ответ 4

Почему бы просто не украсить тег ссылки тем же css, что и кнопкой.

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

Ответ 5

Я использую Router и <Button/>. Нет <Link/>

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

Ответ 6

Если вы используете 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>

Вы можете прочитать больше здесь.

Ответ 7

С помощью стильных компонентов это может быть легко достигнуто

Сначала разработайте стильную кнопку

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

проверьте стиль компонента дома для более

Ответ 8

Многие из решений были направлены на усложнение вещей.

Использование 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>

Ответ 9

Для тех, кто ищет решение с использованием React 16. 8+ (hooks) и React Router 5:

Вы можете изменить маршрут, используя кнопку со следующим кодом:

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

React Router предоставляет некоторые реквизиты для ваших компонентов, включая функцию push() для истории, которая работает почти так же, как элемент <Link to = 'path'>.

Вам не нужно оборачивать свои компоненты компонентом высшего порядка "withRouter", чтобы получить доступ к этим реквизитам.