Getting Started React Router v4

インストール

npm install react-router-dom

  • Webアプリ用のライブラリ(react-routerのコアもセットでインストールされる)

使い方

  • BrowserRouter componentを用意
  • Route componentで遷移先を指定

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

import Home from './coomponents/Home';
import GoalForm from './coomponents/GoalForm';
import Detail from './coomponents/Detail';
import Summary from './coomponents/Summary';
import Reward from './coomponents/Reward';

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/add' component={GoalForm}/>
          <Route path='/summary' component={Summary}/>
          <Route path='/reward' component={Reward}/>
          <Route path='/detail/:key' component={Detail}/>
        </Switch>
      </Router>
   );
  }
}

export default App;