【React】ルーティング設定方法

#概要
react-router-domを使用したReactでのルーティングの導入手順をまとめました。
簡単なページ遷移からRouterを利用した情報の渡し方までコードを交えて、簡易的に説明します。
※Reactでの開発環境が整っていることを前提条件としています。

#手順
以下の手順に沿って進めます。

1. reactアプリの作成
2. react-router-domのインストール
3. Linkの設定
4. Router・Routeの設定
5. Propsを利用した情報の受け渡し方法

#1. reactアプリの作成
まずはアプリの作成を行います。
以下のコマンドだけでアプリの作成が可能です。

$ create-react-app router-test

#2. react-router-domのインストール
今回ルーティングの設定に用いるreact-router-domをインストールします。

$ npm install react-router-dom

#3. Linkの設定
ここまでで開発の下準備は終わりましたので、実際にコードを書いていきます。
まず、クリックしたら指定した_path_に飛ばすリンクを作成します。
今回はNavbar（名前はなんでもOK）というコンポーネントを作成して、そこにリンクを書き加えていきます。
これによって、
Homeをクリックしたら'/'という_path_に飛ぶ。
Aboutクリックしたら'/About'という_path_に飛ぶ。
という意味になります。

Navbar.js

import React from 'react'
import { Link } from 'react-router-dom'

class Navbar extends React.Component {
  render(){
    return(
      <div>
        <Link to="/">Home</Link>
        <Link to="/About">About</Link>
      </div>
    )
  }
}

export default Navbar;

#4. Router・Routeの設定
後は、上記で作成したLinkの_path_とその_path_上で表示したいコンポーネントを結びつけるだけです。
これはRouterとRouteによって実現できます。
今回はデフォルトで作成されるApp.js上に表示するコンポーネント(Home, About)を加えていきます。

####ここで重要な事は主に２つだけです。

1. Routerの中にRouteを書く。
2. Routeの中にpathと対応するコンポーネントを書き込む。

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './Navbar';
import About from './About';
import Home from './Home';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Navbar /><hr/>
            <Route exact path='/' component={Home}/>
            <Route path='/About' component={About}/>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

ここまでの手順を辿れば、冒頭で示したアプリのような動きが実現されます。

#5. Propsを利用した情報の受け渡し方法
最後にRouteからコンポーネントへ情報を受け渡す方法についてまとめます。
これはRoute内の指定するコンポーネントの書き方を変えれば簡単に実現できます。
ここではAboutというコンポーネントにTomという情報を渡しています。

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Navbar /><hr/>
            <Route exact path='/' component={Home}/>
            <Route path='/About' render={ () => <About name={'Tom'}/> }/>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

これをAboutで表示するのは通常のpropsからの情報の受け取り方と同じで以下のようにします。

About.js

import React from 'react'

class About extends React.Component {
  render(){
    return(
      <div>
        <h1>About</h1>
        <h2>I am {this.props.name}</h2>
      </div>
    )
  }
}


export default About;

最終的にこのようになります。