TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

React Routerのv4をシンプルな構成で利用してみるよ

更新日:

ReactにReact Routerを導入しましたので、その手順の共有と簡単な解説をしていきます。

react-routerはReactで作成したアプリケーションにルーティングを簡単に実装することができるコンポーネントです。

前置き

今回手順を紹介するreact-routerのバージョンは4.2.2です。

React Routerはバージョン4から仕様が大幅に変わりました。

v4ではWeb/Native(モバイルアプリなど)/anywhere(コアパッケージ)的な別れ方をしていて、Webで利用する場合は派生先であるreact-router-domをimportすれば、元々のreact-routerを導入する必要はありません。

Reactの環境については作成済みであることを前提で進めさせていただきます。

僕はいつもこちらのサイトのclient部分を参照させていただきながら構築しています。いつもありがとうございます。

React Routerの導入

まずはパッケージをインストールします。

yarn add react-router-dom

npmの場合は以下の通り。

npm install react-router-dom

全体のソースコードは以下の通りになります。GitHubにもソースを配置しましたので、よかったら参考にしてみてください。

https://github.com/stobita/react-router-sample

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route, Link } from 'react-router-dom'

class App extends React.Component{
  render(){
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li><Link to="/">Top</Link></li>
            <li><Link to="/about">このサイトについて</Link></li>
            <li><Link to="/contact">お問い合わせ</Link></li>
          </ul>
          <Route exact path="/" component={TopPage}/>
          <Route path="/about" component={About}/>
          <Route path="/contact" component={Contact}/>
        </div>
      </BrowserRouter>
    )
  }
}

class TopPage extends React.Component{
  render(){
    return (
      <h1>トップページです!ようこそ!</h1>
    )
  }
}

class About extends React.Component{
  render(){
    return (
      <h1>このサイトについてです!読んで!</h1>
    )
  }
}

class Contact extends React.Component{
  render(){
    return (
      <h1>お問い合わせです!問い合わせて!</h1>
    )
  }
}

render(
  <App />,
  document.getElementById('app')
)

重要な箇所だけ抽出して簡単に説明させていただきます。

import { BrowserRouter, Route, Link } from 'react-router-dom'

class App extends React.Component{
  render(){
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li><Link to="/">Top</Link></li>
            <li><Link to="/about">このサイトについて</Link></li>
            <li><Link to="/contact">お問い合わせ</Link></li>
          </ul>
          <Route exact path="/" component={TopPage}/>
          <Route path="/about" component={About}/>
          <Route path="/contact" component={Contact}/>
        </div>
      </BrowserRouter>
    )
  }
}
  1. react-router-domからBrowserRouter,Route,Linkをimportします。
  2. renderするコンポーネントの中身をBrowserRouterコンポーネントで囲います。
  3. BrowserRouterの中で、Routeコンポーネントにルートから見た時のパス(path)と実際にそのパスにアクセスされた時に描写するコンポーネント(component)を渡して配置します。ルートパスにexactというオプションをつけていますが、これはルートパスの時だけTopPageコンポーネントを呼び出すための設定です。これがないと、例えばhttp://localhost:4000/aboutで指定した時もTopPageがAboutと一緒に描写されてしまいます。
  4. Linkコンポーネントに遷移先(to)にRouteのpathに設定したパスを記載することで、それぞれのコンポーネントに遷移するためのリンクが作成されます。

もちろんRouteのcomponentに渡すコンポーネントは関数型コンポーネントでもOKです。

const TopPage = props => {
  return (
    <h1>トップページです!ようこそ!</h1>
  )
}

const About = props => {
  return (
    <h1>このサイトについてです!読んで!</h1>
  )
}

const Contact = props => {
  return (
    <h1>お問い合わせです!問い合わせて!</h1>
  )
}

まとめ

パラメータを利用したルーティングの機能も提供しておりますが、その辺はまた後ほどご紹介できればと思います。

今回の記事がどなたかのお役に立てば幸いです。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア入門

2018/1/21

プログラミング言語としてのJavaについて

こんにちは、フリーランスエンジニアのてぃすです。 エンジニア・プログラマは年収1000万を現実的に目指せる職業として最近特に注目を集めている職業です。 今いる業界の将来性に不安を感じ脱出してきた人たちも、どんどんエンジニア・プログラマという働き方に集結しています。 ある程度エンジニア・プログラマという職業について調べていると、どのプログラミング言語を習得すればいいのか、という疑問が出てくるタイミングがあると思います。 どのプログラミング言語を選べばいいか、という疑問について調べてみると最近ではJava・R ...

続きを読む

エンジニア独立

2018/1/1

エンジニア歴2年の僕がポテパンフリーランスの個人面談を受けてきた

特定派遣会社の正社員からフリーランスエンジニアを目指す活動の一環として、フリーランス初心者に特化したエージェントであるポテパンフリーランスの個人面談に行ってきましたので、その感想と特徴について書いていきます。 前提として僕はエンジニア暦2年半、化石のような超マイナーフレームワークでの開発経験しかないというちょっと残念なエンジニアです。 そんな僕でもフリーランスエンジニアとして活動できるという実感を今回の個人面談で得ることができました。 フリーランスという働き方に興味を持ってはいるが、具体的にどうすれば実現 ...

続きを読む

エンジニア独立

2019/4/15

ITエンジニアの働き方比較(正社員/派遣/フリーランス)

最近ではITエンジニアの需要が激増し、特にプログラマーを目指す人が増えてきました。 今の時代、プログラマーをはじめとするITエンジニアを仕事として選ぶことは賢明かつ的確な判断と言えるでしょう。 その一方で、世間ではプログラマーの不遇が叫ばれていたり、IT土方などの蔑称で呼ばれていたりします。 それは働き方の選択を誤っているプログラマーがあまりに多いことが原因となっています。 稼げる市場であるということは、依頼主と技術提供者の間に入って、不当に利益を得ようとする存在が増えることに繋がります。そういった存在に ...

続きを読む

エンジニア独立

2019/4/15

エンジニアがキャリアアップするための3つのテクニック

こんにちは、フリーランスエンジニアのてぃすです。 エンジニアという職業の中でも高収入とライフワークバランスを実現して充実した人生を送っている人もいれば、低い給料と長時間労働で疲弊しきっている人もいます。 僕も半年前まではエンジニアという職業を見限ってしまおうかと真剣に考えるほど、残念な状況にいました。 しかしこのまま終わってしまうのは悔しいと思い一念発起して行動を起こし、半年の間に月収を3倍以上あげることに成功しました。自分言ってて胡散臭い話ですが、実体験です。 キャリア向上を目指した行動の中には、意識し ...

続きを読む

エンジニア入門

2019/4/23

DMM WEBCAMP(旧:WEBCAMP PRO) - エンジニアとして働きたい人のためのプログラミングスクール

最近のプログラミングスクールは、就業サポート・業務で役立つ教育を掲げているところがかなり多くなってきました。というかこの2つを満たしていないスクールはもはや存在価値が薄くなってきています。 今回はその2本の柱を高いクオリティで実現している DMM WEBCAMP(旧:WEBCAMP PRO)について、現役プログラマの目線から紹介していこうと思います。 このDMM WEBCAMPは総合的に見て、本気でエンジニアを目指そうとする人にとって最有力候補と言えるレベルで非常に優秀なプログラミングスクールです。この根 ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2019 All Rights Reserved Powered by AFFINGER5.