제안 된 방법 사용 : 결과 : 버튼의 링크 , 주석 줄 사이의 코드

react를 사용하여 HTML 태그 에서 Link요소 를 래핑하는 방법이 있는지 궁금합니다 .'react-router'button

현재 Link내 앱에서 페이지를 탐색하기위한 구성 요소가 있지만 해당 기능을 HTML 버튼에 매핑하고 싶습니다.

이것이 웹 브라우저에서 렌더링되지만주의하십시오 :
⚠️ html button에 html 을 중첩 a(또는 그 반대) 하는 것은 유효한 html이 아닙니다 ⚠️. 화면 판독기에 html 의미를 유지하려면 다른 접근 방식을 사용하십시오.

반대로 포장하면 링크가 첨부 된 원래 버튼이 나타납니다. 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>

LinkButton component-React Router v4 용 솔루션

첫째,이 질문에 대한 다른 많은 답변에 대한 메모입니다.

⚠️ 중첩 <button>되며 <a>유효한 html이 아닙니다. ⚠️

buttonReact Router Link구성 요소에 html 을 중첩하는 것을 제안하는 모든 답변 (또는 그 반대)은 웹 브라우저에서 렌더링되지만 의미 론적이거나 액세스 가능하거나 유효한 html은 아닙니다.

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

☝ 이 마크 업을 validator.w3.org로 확인하려면 클릭하십시오 ☝

일반적으로 버튼이 링크 내부에 배치되지 않기 때문에 레이아웃 / 스타일링 문제가 발생할 수 있습니다.

<button>React Router <Link>구성 요소 와 함께 html 태그 사용 .

html button태그 만 원하는 경우 …

<button>label text</button>

… 그런 다음, React Router의 Link구성 요소 처럼 작동하는 버튼을 얻는 올바른 방법이 있습니다 .

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

여기에서 자세한 내용을 읽을 수 있습니다 .

react-router v5.1.0 이후 useHistory 후크 를 사용할 수 있습니다 .

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

라우터와 <버튼 />을 사용합니다. 아니요 <링크 />

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

⚠️ 아니요, html button에 html 을 중첩 a(또는 그 반대로)하는 것은 유효한 html이 아닙니다.

React 16.8+ (후크) 및 React Router 5를 사용하는 솔루션을 찾는 모든 사람 :

다음 코드로 버튼을 사용하여 경로를 변경할 수 있습니다.

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

React Router는 기록 에 대한 push () 함수를 포함하여 구성 요소에 몇 가지 소품을 제공합니다. <Link to = 'path'> 요소와 매우 유사하게 작동 .

이러한 소품에 액세스하기 위해 상위 구성 요소 "withRouter"로 구성 요소를 래핑 할 필요가 없습니다.

스타일이 지정된 구성 요소를 사용하면 쉽게 달성 할 수 있습니다.

먼저 스타일이 지정된 버튼 디자인

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 버전 6 업데이트 :

여기에있는 다양한 답변은 반응 라우터의 진화 타임 라인과 같습니다 🙂

react-router v6의 최신 후크를 사용하면 이제 useNavigate후크로 쉽게 수행 할 수 있습니다 .

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

function MyLinkButton() {
  const navigate = useNavigate()
  return (
      <button onClick={() => navigate("/home")}>
        Go Home
      </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>