【コピペでいけます】React×MaterialUIで外部URLへのルーティング実装方法

React×MaterialUIで外部URLへのルーティング実装方法を２つ紹介します。

MaterialUIのButtonを使用する

See the Pen React_goto_external_URL_page by atsushiIMG (@atsushiimg) on CodePen.

MaterialUIのButtonのhref属性に遷移先のURLを記述することでルーティングできます。

またtarget属性に”_blank”を設定してあげることで同じウィンドウにて新規タブにルーティング先のサイトを開くことができます。

React-router-domのLinkを使用する

import React from 'react'
import { Link } from 'react-router-dom'

const LinkButton = () => {
    return(
      <div>
        <Link target="_blank" to='http://www.google.com'>Goto Google</Link>
      </div>
    )
}
export default LinkButton;

こちらはReact-router-domを導入する必要があります。

同じようにto属性に遷移先のURLを入力しておき、target属性で”_blank”を設定してあげることで新規タブにて表示してくれます。

今度react-router-domの導入についてもブログにまとめておこうと思います。

I try to make my Material-UI RaisedButton link to an external url without success?

As the question in the title state. Playing with react, react-router and material-ui and in one place I want to make an action button in a Card component link ...

stackoverflow.com

終わり