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/25

絶対にエンジニアになりたい人にオススメするプログラミングスクール3選

こんにちは、フリーエンジニアのてぃすです。 最近はエンジニアの人手不足による給与向上や、自由度の高い働き方に魅力を感じてエンジニア・プログラマを目指す人が増えてきました。 僕の周囲にもプログラミングを始めたいという人が増えてきて、プログラミングスクールとかたくさんあるけどどれがいいの?という質問を受けることがあります。 せっかくなので実際に現場でWeb開発に携わる立場からプログラミングスクールについて比較しながら調べてみました。 そして実際にエンジニアとして働くために最も充実したサービスを提供しているプロ ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアとして働くことの実情

こんにちは、フリーランスエンジニアのてぃすです。 最近は本業が忙しくブログの更新が滞っておりました。更新を楽しみにしてくださった方々、申し訳ありませんでした。 今後もエンジニアにとって有益な情報を提供できるよう更新を再開していこうと思いますので、引き続きよろしくお願いいたします。 フリーランスエンジニアの実情 このブログではフリーランスエンジニアとして働くことの利点や、実際にどのようなステップでフリーランスエンジニアになるかについての記事をなんども書いてきました。 しかし実際にフリーランスエンジニアとして ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

エンジニア入門 エンジニア独立 働き方

2019/4/15

高収入を目指してエンジニア・プログラマーになることは正しい選択か

こんにちは、フリーエンジニアのてぃすです。 今日お話する内容は、 高収入を目指してITエンジニア・プログラマーになることは正しい選択か というもの。 SNSやブログ、またはプログラミングスクールの謳い文句として「エンジニアになって年収○万を目指そう」などと行った言葉を見ることが最近増えてきました。 またそれに対して、「お金のためにエンジニアになることは間違っている」「実際はそんな稼げない」と行ったような意見も同様に飛び交っています。 僕の個人的な意見としては、高収入な職業につける資格や経験、環境にないので ...

続きを読む

エンジニア入門

2019/4/15

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

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

続きを読む

-プログラミング
-,

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