ReactJS react-routerのサンプルアプリ

非常にシンプルな実装例のメモ！
github: https://github.com/Kohei-Sato-1221/SugarReactRouter

react-routerとは？

Reactでルーティングを実現するためのライブラリ

 前提条件

1. npmコマンド使えるようにしておく
2. create-react-appを使えるようにしておく

実装方法

サンプルのReactプロジェクトを用意

create-react-app router-sample

ライブラリをインストール

cd router-sample
npm install react-router-dom

App.jsを以下の通り書き換える

App.js

import React from 'react';
import {Route, BrowserRouter, Link} from 'react-router-dom'

const App = () => (
  <BrowserRouter>
    <div>
      <div><Link to='/page1'>Go to Page1</Link></div>
      <div><Link to='/page2'>Go to Page2</Link></div>

      <br/>

      <Route path='/page1' component={Page1} />
      <Route path='/page2' component={Page2} />
    </div>
  </BrowserRouter>
)

const Page1 = () => (
  <div>This is Page1</div>
)

const Page2 = () => (
  <div>This is Page2</div>
)

export default App;

以下のコマンドで起動

npm start