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')
);