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을 확인하세요 .