目次
- ルーティングの概念
- 基本的なルーティング
- 少し応用
React Router v4
https://reacttraining.com/react-router/
ルーティングの概念
普通のHTMLではaタグで使ってその際に別ページのHTML、CSS、JSのファイルを取ってくる為のリクエストとレスポンスが走ります。
しかしSPA(シングルページアプリケーション)場合はそうではありません。
Webpackと呼ばれるモジュールバンドラでプロジェクト内で使われている全てのコンポーネントを一つのJSファイルに書き出します。(設定は色々できます。)
Reactアプリをみてみます。
ただh1の文字にReactロゴのSVGだけのページです。
ソースは見ると、、
どこにもh1もReactLogoのSVGもないですよね。
次に、./static/js/bundle.jsをみてみます。
すると中に何万行もの記述があり、写真の38362行目に'React Router\u3092\u899A\u3048\u308B'
ってありますね。
これが日本語がユニコードで変換されており、38353行目にcreateElement(
とあります。
'h1'~,
もう分かりましたよね?
ReactではWebpackによってまとめられた1つのJSファイルをの中から必要な要素をJavascriptで動的に生成しています。
もちろんページごとに1つづつ作られる訳ではなくプロジェクトで1つのjsファイルでWebpackから吐き出されます。
なので、ルーティングでページが変わった時は、リクエスト、レスポンスは走らずJSで動的にDOM要素を生成します。
しかもその際に前にお話しした仮装DOMで差分を測って差分のみを更新する訳です。
速い訳ですよね。。
基本的なルーティング
コード自体は単純でそんなに難しくないと思います。
まずはreact-routerのインストール
npm install -S react-router-dom
色々な書き方がありますが、個人的に好きな書き方で書きます。
srcディレクトリの中にルーティングを定義するだけのコンポーネント、Routing.js
を作成します。
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './App';
class Routing extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</BrowserRouter>
)
}
}
export default Routing;
これをindex.js
で呼び出します。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import Routing from './Routing';
ReactDOM.render(<Routing />,document.getElementById('root'));
registerServiceWorker();
すると最初と同じ画面が出ます。
このまま続きます。
別ページAbout.js
を作ります。
import React from 'react';
import { Link } from 'react-router-dom';
const About = () => (
<div>
<h1>About</h1>
<p>Aboutページです。</p>
<Link to="/">Homeへ戻る</Link>
</div>
)
export default About;
Routing.js
で読み込みます
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import App from './App';
import About from './About';
class Routing extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/about" component={About} />
</Switch>
</BrowserRouter>
)
}
}
export default Routing;
App.js
修正します
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>React Routerを覚える</h1>
<img src={logo} className="App-logo" alt="logo" />
<div>
<Link to="/about">About</Link>
</div>
</div>
);
}
}
export default App;
これでブラウザを開くと無事リンクが通ってます。
解説
<BrowserRouter>
React Router使いますよ。って宣言的なものだと思ってください。
React Router使うときのお約束です。
1プロジェクトに1回だけ使います。
これを通すと子要素にpathの情報やページ遷移に使う関数などが渡されていきます。
<Switch>
これが口だと言いづらいのですが、まぁ最初はおまじないとして、Route
を使うときには外で囲んであげてください。
<Route>
pathに合わせてコンポーネントを入れ替えてくれます。
exactは全体一致、つけないとpath以降は先頭一致になります。
<Link>
リンク遷移したい時はaタグは使わず、このタグを使います。
toに遷移したい先を書く。
少し応用
疲れたので今度描きます笑