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

まとめ

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

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

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

よく読まれている記事

エンジニア入門

2019/4/28

未経験からプログラミングを学ぶための方法を徹底比較

いまの時代、プログラマという仕事ほどインスタントに高収入を目指せる職業は存在しないと考えています。 未経験の言語での参加にも関わらず、最初から残業なしで手取り30万円を得られた経験を以って、そのことを強く実感しました。 で、最近はプログラマ・エンジニアのこういった稼げる側面に気づいて、プログラマになりたいと考える人多くなってきました。 が、実際にどのような手順を踏んでプログラミングを学習して、プログラマになればいいか分からない人も同様に多いようです。 勉強方法によっては遠回りになりかねない 働きながら勉強 ...

続きを読む

エンジニア独立

2019/3/30

プログラマーはIT土方なのか

プログラマーという働き方について、調べたときに必ずといって良いほど出てくる単語であるIT土方。 実際に土木関係に従事する人たちがどのような労働環境におかれているかは置いといて、基本的には以下のような状況を揶揄して使われている言葉です。 毎日終電まで残業させられる 納期のプレッシャーに追われる 忙しいのに低賃金 とにかく辛い そういった過酷な環境であるから、『プログラミングを楽しいと思っていたり、理数系の才能がある人間じゃなければ絶対になるな』という言葉もよく聞きます。 今回はプログラマーが世間でIT土方と ...

続きを読む

エンジニア入門

2019/4/15

エンジニアは勉強し続けなければいけない職業なのか

こんにちは。フリーランスエンジニアのてぃすです。 最近は就職・転職する際にエンジニアを選択肢に含める人が増えてきています。 しかしエンジニアという職業を候補にあげるにあたって、 エンジニアは働きながら勉強し続けなければいけないのではないか? という疑問もよく見聞きします。 そこで今回はフリーランスエンジニアとして活動している僕の視点からこの疑問についての答えを説明していこうと思います。 結論 先に結論を述べると、 エンジニアは勉強し続けなければいけないのか? という疑問の答えはNOです。 決してエンジニア ...

続きを読む

エンジニア独立

2019/5/29

正社員エンジニアという働き方を批判してみる

今回はちょっと過激めなタイトルを飾ってみました。 僕はエンジニアとして、正社員・派遣社員・フリーランスとして働いて来ていますが、その中でどうしても正社員という働き方が特別もてはやされているのかが分かりません。 とはいえ有名理系大卒で競争力激高な大手企業のスーパーエンジニアだったり、激レアホワイト企業に勤めている人に反論されたらぐうの音も出ないというか、論点が変わってきてしまうので、以下の条件に当てはまるような正社員エンジニアに向けてのお話ということで読み進めていただければなと。 20代で年収300万円以下 ...

続きを読む

エンジニア入門

2019/4/15

プログラミングスクールって実際のところどうなの?

こんにちは、フリーエンジニアのてぃすです。 プログラミングスクール、今や広告やSNSでも頻繁に目にするこのワード。 初心者がプログラミングを始めるなら通うべき 独学でも十分だから必要ない プログラミングスクールに通ってもプログラマになれない などなど賛否両論飛び交っていますが、今日は現役エンジニアの視点からプログラミングスクールのメリット・デメリット、そしてエンジニアを目指す上での有力な選択肢となるかについてお話していきます。 プログラミングスクールとは何か その名前の通り、プログラミングを学ぶための学校 ...

続きを読む

-プログラミング
-,

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