Material-UI RaisedButton 링크를 외부 URL에 연결하려고 해도 실패합니까?

Material-UI RaisedButton 링크를 외부 URL에 연결하려고 해도 실패합니까?

제목에 있는 질문으로.

react, react-router 및 material-ui를 가지고 노는 것.한 곳에서 카드 컴포넌트의 액션버튼을 외부 URL에 링크하고 싶습니다.

window.open을 사용할 이벤트 핸들러를 추가할까 생각 중인데, 더 스마트한 방법인가 봐요?

코드가 이렇게 되기 전에 해결책을 찾았어요

<CardActions>
   <RaisedButton
       href={this.props.url}
       label="OK"
   />
</CardActions>

솔루션은 매우 단순했습니다.

<CardActions>
   <a href={this.props.url} target="_blank">
     <RaisedButton
        label="OK"
     />
   </a>
</CardActions>

react-router Link 또는 material-ui 버튼에 외부 링크를 추가하는 경우 외부 URL에 'http://'(또는 https://)를 추가하는 것이 중요합니다.링크는 add http가 없으면 동작하지 않습니다.

잘못된 코드 -

<Link target="_blank" to='www.google.com'>Google</Link>

리다이렉트 링크는

localhost:3000/www.google.com

올바른 코드 -

react-router Link를 사용하여 리다이렉트하는 경우 코드 예를 다음에 나타냅니다.

<Link target="_blank" to='http://www.google.com'>Google</Link>

material-ui 버튼으로 리다이렉트 하는 경우는, 다음의 코드 예를 나타냅니다.

<Button target="_blank" href="http://www.google.com/">Google</Button>

주의: 추가했습니다.target="_blank"링크/버튼에 있습니다.이것은 옵션입니다(또, Web 사이트에 외부 링크를 추가하는 경우는, 같은 탭이 아닌 다른 브라우저 탭에서 링크를 엽니다).

포장할 수 있습니다.<RaisedButton />안으로<Link />내부 라우팅용 컴포넌트.

<Link to={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</Link>

간단하게 정리할 수 있습니다.<a>외부 태그:

<a href={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</a>

타겟, 컴포넌트 및 href 소품을 사용해야 합니다.

<Button                
   target="_blank"
   component="a"
   href="http://www.google.com/"
>
 Google
</Button>

<Button component={Link} to={path} >
   LINK BUTTON
</Button>

를 사용해 보았습니다.Link에서Button.component- 단, Button 컴포넌트가 전폭으로 되어 있습니다.width: auto;아무것도 안 했어요

어쨌든, 간단하게 말하면, 다음과 같이 기능적으로나 스타일리시하게 동작할 수 있었습니다.

      <Link href="/somewhere/over/the/rainbow" target="_blank">
        <Button size="medium" variant="contained" color="primary">
          View RV
        </Button>
      </Link>

나한텐 여전히 버그가 많았어.그 수정사항은<a>반작용이 아니라<Link>.

간단하게 패스할 수 있습니다.hrefButton 컴포넌트에 프로포트를 클릭합니다.그러면 버튼은 자동으로 링크로 작동합니다.당신은 또한 통과가 허용됩니다. 예를 들어,target링크를 다른 탭에서 열려면 를 누릅니다.

const PremiumButton = () => (
  <Button size="large" href="https://buy.stripe.com/14kdSp4bg6Qj2v65km" variant="contained">
    Criar conta premium
  </Button>
)

위의 코드는 다음과 같이 출력됩니다.

언급URL : https://stackoverflow.com/questions/38573892/i-try-to-make-my-material-ui-raisedbutton-link-to-an-external-url-without-succes