โดยใช้วิธีการที่แนะนำ: นี่คือผลที่ได้: การเชื่อมโยงในปุ่ม , รหัสในระหว่างเส้นแสดงความคิดเห็น

ฉันสงสัยว่ามีวิธีห่อLinkองค์ประกอบจาก'react-router'ในbuttonแท็กHTML โดยใช้ react หรือไม่

ขณะนี้ฉันมีLinkส่วนประกอบสำหรับนำทางหน้าต่างๆในแอปของฉัน แต่ฉันต้องการแมปฟังก์ชันนั้นกับปุ่ม HTML

แม้ว่าสิ่งนี้จะแสดงในเว็บเบราว์เซอร์ แต่โปรดระวังว่า:
⚠️การซ้อน html buttonใน html a(หรือกลับกัน) ไม่ใช่ html ที่ถูกต้อง ⚠️ หากคุณต้องการคงความหมาย html ไว้กับโปรแกรมอ่านหน้าจอให้ใช้แนวทางอื่น

ทำการห่อในทางกลับกันและคุณจะได้ปุ่มดั้งเดิมพร้อมกับลิงค์ที่แนบมา ไม่จำเป็นต้องเปลี่ยนแปลง CSS

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

ปุ่มนี้คือปุ่ม HTML นอกจากนี้ยังมีผลบังคับใช้กับส่วนประกอบที่นำเข้าจากห้องสมุดบุคคลที่สามเช่นความหมาย-UI-ตอบสนอง

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

LinkButton คอมโพเนนต์ - โซลูชันสำหรับ React Router v4.2

อันดับแรกหมายเหตุเกี่ยวกับคำตอบอื่น ๆ สำหรับคำถามนี้

⚠️ทำรัง<button>และ<a>เป็น html ไม่ถูกต้อง ⚠️

คำตอบใด ๆ ที่แนะนำการซ้อน html buttonในLinkส่วนประกอบReact Router (หรือในทางกลับกัน) จะแสดงผลในเว็บเบราว์เซอร์ แต่ไม่ใช่ html เชิงความหมายเข้าถึงได้หรือถูกต้อง:

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

☝ คลิกเพื่อตรวจสอบความถูกต้องของมาร์กอัปนี้ด้วย validator.w3.org ☝

ซึ่งอาจนำไปสู่ปัญหาการจัดวาง / การจัดรูปแบบเนื่องจากโดยปกติปุ่มต่างๆจะไม่ถูกวางไว้ในลิงก์

การใช้<button>แท็กhtml กับ<Link>ส่วนประกอบReact Router

หากคุณต้องการเพียงbuttonแท็กhtml ...

<button>label text</button>

…จากนั้นต่อไปนี้เป็นวิธีที่ถูกต้องในการรับปุ่มที่ทำงานเหมือนกับLinkส่วนประกอบของ React Router …

การใช้งานตอบสนองของ 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 hookนี้

ทำไมไม่เพียงตกแต่งแท็กลิงค์ด้วย 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>

คุณสามารถอ่านเพิ่มเติมที่นี่

คุณสามารถใช้useHistory เบ็ดตั้งแต่ตอบสนองเตอร์ v5.1.0

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

ฉันใช้เราเตอร์และ <ปุ่ม /> ไม่มี <Link />

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

⚠️ไม่การซ้อน html buttonใน html a(หรือกลับกัน) ไม่ใช่ html ที่ถูกต้อง

สำหรับใครที่กำลังมองหาวิธีแก้ปัญหาโดยใช้React 16.8+ (hooks) และ React Router 5:

คุณสามารถเปลี่ยนเส้นทางโดยใช้ปุ่มที่มีรหัสต่อไปนี้:

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

React Router จัดเตรียมอุปกรณ์ประกอบฉากบางอย่างให้กับส่วนประกอบของคุณรวมถึงฟังก์ชันpush ()ในประวัติซึ่งทำงานเหมือนกับองค์ประกอบ <Link to = 'path'>

คุณไม่จำเป็นต้องห่อส่วนประกอบของคุณด้วยส่วนประกอบที่สูงกว่า "withRouter" เพื่อเข้าถึงอุปกรณ์ประกอบฉากเหล่านั้น

อัปเดตสำหรับ React Router เวอร์ชัน 6:

คำตอบต่างๆที่นี่เปรียบเสมือนเส้นเวลาของวิวัฒนาการของรีแอคชั่นเตอร์

การใช้ hooks ล่าสุดจาก react-router v6 ตอนนี้สามารถทำได้อย่างง่ายดายด้วยuseNavigatehook

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

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

ด้วยส่วนประกอบที่มีสไตล์สามารถทำได้อย่างง่ายดาย

ขั้นแรกออกแบบปุ่มสไตล์

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

ตรวจสอบบ้านของส่วนประกอบที่มีสไตล์สำหรับข้อมูลเพิ่มเติม

วิธีแก้ปัญหาหลายอย่างมุ่งเน้นไปที่สิ่งที่ซับซ้อน

การใช้ 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>