React の単純なサンプルに React Router を適用する

React アプリの骨格を作成したので、それに、ページ遷移を実現する、React Router を適用させる。

React Router のリファレンスは以下。

https://reacttraining.com/react-router/web/guides/philosophy

1.準備

1.1 インストール

npm install --save react-router-dom

2.変更

2.1 ./src/app.js

https://reacttraining.com/react-router/web/example/basic の省略形をapp.jsに組み込んでみる。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';


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

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/topics">Topics</Link></li>
            </ul>  
            <hr/>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/topics" component={Topics} />
        </div>
      </Router>
    );
  }
}

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

3.実行

  • npm run watch
  • npm run start

上記で実行、詳細は以下

http://typea.info/blg/glob/2017/08/react-1.html

リンクをクリックすると、コンポーネントが入れ替わる。

react_router

  1. React 開発の全体像を把握しつつ開発環境を整える
  2. React の単純なサンプルに React Router を適用する
  3. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する
  4. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む
  5. React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する