くずきのblog

技術とか色々

react-routerを使ったルーティング処理

どうも、くずきです。

こないだ、create-react-appを本番環境で使ってみた(導入編)について紹介しました。

kzkohashi.hatenablog.com

今回はreact-routerを使ったルーティング処理をやてみます。

バージョンは4.2.2を利用。 バージョン3の時とガラッと変わったみたいだけど、4からなのであまり知りませぬ。 興味がある人は検索してみてくだせい。

そーろーな方は、ここみてください。

react-router-domの追加

packege.jsonreact-router-domを追加する。
Webサイト作る人はreact-router-domにしとけば問題ないと思う。

{
  "name": "create-react-app-practice",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2", # 追加
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

忘れずインストール

npm install

これで下準備は完了。

Routes Componentの追加

ルーティングの起点となるComponentを作る。

まず、src以下にRoutes.jsを追加する。

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import App from "./App";

export class Routes extends Component {
  render(){
    return (
      <BrowserRouter>
        <Route exact path="/" component={App}/>
      </BrowserRouter>
    )
  }
}

export default Routes;

<BrowserRouter>がルーティングするための肝となる部分で、 構築するサイトが静的なファイルのみで構成されてないならこれでいいと思う。

既に存在するApp(Component)をインポートし、<Route>でパスとコンポーネントを指定している。

index.jsで読み込まれるコンポーネントの変更

最後に、index.jsAppの部分を、先ほど作ったRoutesに変更してあげれば完成です。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Routes from './Routes'; # 変更
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Routes />, document.getElementById('root')); # 変更
registerServiceWorker();

f:id:kzkohashi:20170915193653p:plain

とりあえず終わり。

(おまけ)Switchを利用したNotFoundページの作り方

あまりに簡単すぎたので、もう少しreact-routerの機能を使ってみます。 react-routerにはSwitchと呼ばれる排他的レンダリングする機能があります。
[参考] github.com

ようは、pathにマッチしなかったらpathがついてないコンポーネントを表示することができる。

src以下にNotFound.jsを追加する。

import React, { Component } from "react";

class NotFound extends Component {

  render() {
    return (
      <div clasName="NotFound">
        <p><strong>ページが見つかりません。</strong></p>
      </div>
    )
  }
}

export default NotFound;

ページが見つかりませんとでるだけのコンポーネント

次にRoutesに実装する。

import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import App from "./App";
import NotFound from "./NotFound"; # 追加


export class Routes extends Component {
  render(){
    return (
      <BrowserRouter>
        <Switch> # 追加
          <Route exact path="/" component={App}/>
          <Route component={NotFound}/> # 追加
        </Switch> # 追加
      </BrowserRouter>
    )
  }
}

export default Routes;

実際に今回指定していないpathでアクセスして見ると

f:id:kzkohashi:20170915193659p:plain

このようにSwitchの機能を使ったNotFoundの実装ができた。

以上です。
こちらのリポジトリで、今回の内容も含めて随時commitしていってます。

github.com