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

稼げないエンジニアは過小評価が原因

こんにちは、フリーエンジニアのてぃすです。 僕は正社員時代、3年目になっても手取りが20万にも届かない残念な状態にありました。その時は、 てぃすITエンジニアとか全然稼げない職業なんだな という印象を持っていました。別の業種に就こうと考えたことも1度や2度ではないです。 そして正社員を辞めてフリーランスになって月100万程度は安定して稼げるようになり、エンジニアの収入の相場のカラクリが少しずつ掴めてきました。 勘違いしないで欲しいのですが、単に正社員よりフリーランスの方が優れているということが言いたいわけ ...

続きを読む

エンジニア入門

2018/8/17

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

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

続きを読む

エンジニア独立

2019/4/15

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

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

続きを読む

エンジニア入門

2018/8/19

プログラミング初心者に贈る挫折しない為の3つの心構え

こんにちは、フリーエンジニアのてぃすです。 最近では未経験者からプログラマー・エンジニアへの転身を志しプログラミングを学習を始めている人が増えていますね。 しかし理解出来ない部分が出てきたり、モチベーションを保てずに学習途中で挫折していまうという話も多く耳に入ってきます。 そこで今回は文系出身から職業プログラマーへ進んだ僕が、挫折しないプログラミング学習の進め方・心構えについてお話していこうと思います。 目的が具体的にイメージできる教材を使用する プログラミングの学習を始めて間もないときに、 変数に値を代 ...

続きを読む

エンジニア独立

2019/5/29

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

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

続きを読む

-プログラミング
-,

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