どうも、くずきです。
こないだ、create-react-appを本番環境で使ってみた(導入編)について紹介しました。
今回はreact-routerを使ったルーティング処理をやてみます。
バージョンは4.2.2
を利用。
バージョン3
の時とガラッと変わったみたいだけど、4
からなのであまり知りませぬ。
興味がある人は検索してみてくだせい。
そーろーな方は、ここみてください。
react-router-domの追加
packege.json
にreact-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.js
のApp
の部分を、先ほど作った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();
とりあえず終わり。
(おまけ)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
でアクセスして見ると
このようにSwitch
の機能を使ったNotFound
の実装ができた。
以上です。
こちらのリポジトリで、今回の内容も含めて随時commit
していってます。