React Router

奥山幸彦 / @FiNGAHOLiC

前回で何となくかもですが、

React.jsを使って
UI実装が出来そうですよね？

今回はReact.jsを使用した際の

ルーティングの追加方法を
学んでいきましょう🐰

で、どうしたら良いの？

react-routerが全部やってくれます！

早速実装してみましょう

# 任意の作業ディレクトリへ移動
$ cd /Users/fingaholic/Desktop

# Reactプロジェクトを作成
$ create-react-app my-2nd-react

# アプリケーションディレクトリに移動
$ cd my-2nd-react

# react-routerをローカルにインストールしておく
$ yarn add react-router

# 一旦起動してみる
$ yarn start

# 一旦ローカルサーバーをstopしてsrc以下を下記のようなファイル構成にする
# .
#├── App.js
#└── index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

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

Index.js

import React from 'react';

const App = (props) => {
  return (
    <header>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/page1">Page1</a></li>
        <li><a href="/page2">Page2</a></li>
        <li><a href="/page3">Page3</a></li>
      </ul>
    </header>
  );
}

export default App;

App.js

import React from 'react';

import Page1 from './components/Page1';
import Page2 from './components/Page2';
import Page3 from './components/Page3';

const App = (props) => {
  return (
    <div>
      <header>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/page1">Page1</a></li>
          <li><a href="/page2">Page2</a></li>
          <li><a href="/page3">Page3</a></li>
        </ul>
      </header>
      <Page1 />
      <Page2 />
      <Page3 />
    </div>
  );
}

export default App;

App.js

import React from 'react';

const Page1 = () => {
  return (
    <section>
      <h1>Page 1</h1>
      <p>Page 1です</p>
    </section>
  );
}

export default Page1;

components/Page1/index.js

import React from 'react';

const Page2 = () => {
  return (
    <section>
      <h1>Page 2</h1>
      <p>Page 2です</p>
    </section>
  );
}

export default Page2;

components/Page2/index.js

import React from 'react';

const Page3 = () => {
  return (
    <section>
      <h1>Page 3</h1>
      <p>Page 3です</p>
    </section>
  );
}

export default Page3;

components/Page3/index.js

一旦ブラウザで確認しましょう

import React from 'react';

const App = (props) => {
  return (
    <div>
      <header>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/page1">Page1</a></li>
          <li><a href="/page2">Page2</a></li>
          <li><a href="/page3">Page3</a></li>
        </ul>
      </header>
      <section>
        {props.children}
      </section>
    </div>
  );
}

export default App;

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

import App from './App';
import Page1 from './components/Page1';
import Page2 from './components/Page2';
import Page3 from './components/Page3';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
      <Route path="page3" component={Page3} />
    </Route>
  </Router>,
  document.getElementById('root')
);

Index.js

遷移できない…

import React from 'react';
import { Link } from 'react-router'

const App = (props) => {
  return (
    <div>
      <header>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/page1">Page1</Link></li>
          <li><Link to="/page2">Page2</Link></li>
          <li><Link to="/page3">Page3</Link></li>
        </ul>
      </header>
      <section>
        {props.children}
      </section>
    </div>
  );
}

export default App;

App.js

トップページにも

コンポーネントを表示したい…

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

import App from './App';
import Home from './components/Home';
import Page1 from './components/Page1';
import Page2 from './components/Page2';
import Page3 from './components/Page3';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
      <Route path="page3" component={Page3} />
    </Route>
  </Router>,
  document.getElementById('root')
);

Index.js

import React from 'react';

const Home = () => {
  return (
    <section>
      <h1>Home</h1>
      <p>Homeです</p>
    </section>
  );
}

export default Home;

components/Home/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

import App from './App';
import Home from './components/Home';
import Page1 from './components/Page1';
import Page2 from './components/Page2';
import Page3 from './components/Page3';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}></IndexRoute>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
      <Route path="page3" component={Page3} />
    </Route>
  </Router>,
  document.getElementById('root')
);

Index.js

おつかれちゃん🐰

Thank you Sumally