REACT ROUTERを使ってみる

REACT ROUTER便利。バージョンが変わるごとにかなり使い方が変わるらしい。ここに詳しいドキュメントがある。使い方を試してみます。

準備

create-react-appでプロジェクトをつくります。

$ create-react-app route-test

react-router-domをインストールします。

react-router-domのバージョンは4.0.0だった。

$ yarn add react-router-dom

開発サーバ立ち上げます。

$ yarn start

試してみる

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './index.css';

const Home = () => (
    <div>
        <h2>Home</h2>
    </div>
)

const About = () => (
    <div>
        <h2>About</h2>
    </div>
)

const Contact = () => (
    <div>
        <h2>Contact</h2>
    </div>
)

const Child = ({ match }) => (
    <div>
        <p>{match.params.id}です</p>
    </div>
)

const App = () => (
    <div>
        <Nav />
        <Router>
            <div style={{padding: '10px'}}>
                <p>
                    <Link to="/">Home</Link>&nbsp;
                    <Link to="/about">About</Link>&nbsp;
                    <Link to="/contact">Contact</Link>&nbsp;
                </p>

                <hr />

                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/contact" component={Contact}/>

                <hr />

                <Route exact path="/" render={() => (
                    <p>ホームページにようこそ！</p>
                )} />
                <Route path="/:id" component={Child}/>
            </div>
        </Router>
        <Footer />
    </div>
)

const Nav = () => (
    <div className="Nav" style={{ background: '#6cf', padding: '20px 10px' }}>
        Navbar
    </div>
)

const Footer = () => (
    <div className="footer" style={{textAlign: 'center'}}>
        <hr />
        Footer
    </div>
)

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

スクリーンショット

わかったこと

• Routerの中は1つのタグしか入れてはいけない
• Linkでリンクが作れて、勝手にブラウザの履歴に登録される
• Routeは現在位置がpathとマッチした場合のみ、コンポーネントを表示できる
• Routeにexactをつけると、設定しているpathが完全一致の場合のみマッチしたことになる
• Routeのpathに:（コロン）をつけると、URLパラメータとして使える。match.params.hogeでURLパラメタの内容を取得できる。