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/8/17

現役エンジニアからみたProEngineerの『エンジニアカレッジ』について

こんにちは、フリーエンジニアのてぃすです。 最近、 どうすればエンジニアになれるのか エンジニアになるためにどんな勉強をしたの? といった質問を受けることが多くなってきました。 エンジニアは高稼働のブラック職業であるという印象も薄れてきて、効率よく稼げる職業としての側面に気付き始めた方が増えてきたということでしょう。 とはいえ全くの未経験からITエンジニアに転向するというのは独学の場合、不可能ではありませんが、かなり難易度の高い挑戦であると言えます。たとえ独学で成し遂げたとしても、よっぽど運がよくない限り ...

続きを読む

エンジニア入門

2019/4/15

最も効率の良いプログラミング学習フロー

こんにちは、フリーエンジニアのてぃすです。 エンジニアの需要が拡大し、売り手市場となったことから、プログラミングを学習し始めた人、学習してみたいという人がかなり増えてきています。 これからの時代プログラミングを学習することは、豊かな人生を目指す上で非常に強力なスキルとなってきます。 今回はプログラミング初心者の方々に向けて、最も効率的なプログラミングの学習方法を解説していきます。 はじめに この学習フローでは、遊びのメカニズムを利用して進めていきます。 どういうことでしょうか。説明していきます。 遊ぶ感覚 ...

続きを読む

エンジニア入門

2018/11/14

○ヶ月でプログラマーになれる vs そんな簡単になれない論争について

こんばんは。フリーエンジニアのてぃすです。 最近TwitterをはじめとするSNSやブログなどで度々繰り返されている 「○ヶ月でエンジニア/プログラマーになれる」という広告や意見に対する、 「エンジニア/プログラマーはそう簡単になれる職業ではない」 という意見から始まる論争。 今日は実際にプログラマーとしてご飯を食べていて、職業エンジニアになるためのノウハウについての記事も投稿している立場から、この一連のやりとりについて意見してみようと思います。 「○ヶ月でエンジニア/プログラマーになれる」という広告・意 ...

続きを読む

エンジニア独立

2019/5/29

転職したいエンジニアの背中を押す記事

知人であったり、SNS上で知り合いのエンジニアの中には、今の職場に不満を感じ、転職したいという思いを募らせている人が結構な割合います。 僕からしたら絶賛売り手市場であるエンジニア業界において、劣悪な労働環境に耐えるという選択は非常に勿体無いことだと考えています。 確かにIT業界における技術者というのは、非常に需要のある立場ですが、慎重に働く場所を選ばなければ搾取される可能性が高いです。 技術という武器を持っているエンジニアならば、ストレスなく効率よく働くべき場所を求めて行動を起こすべきだと思うんですよね。 ...

続きを読む

エンジニア独立

2019/4/15

仕事を選べるITエンジニアになるための面談テクニック

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアとして働いていく上で、大部分の人が経験する面談。 その後の数ヶ月、正社員や長期プロジェクトであれば数年の待遇を左右する超重要イベントなのですが、多くのエンジニアがこの重要性に気づいていません。 とりあえずこれまでの経歴を箇条書きして どこかで調べてきたような自己PRを適当に書いて 面談で書いてあることをそのまま口にする といった投げやりな面談を続けていては、売り手市場ということもあり仕事に困る可能性は低いですが、待遇の良い仕事を気づかないうちに逃 ...

続きを読む

-プログラミング
-,

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