Reactjs-router

ReactJS-ルーター

この章では、アプリのルーティングを設定する方法を学びます。

ステップ1-React Routerをインストールする

*react-router* をインストールする簡単な方法は、*コマンドプロンプト*ウィンドウで次のコードスニペットを実行することです。

C:\Users\username\Desktop\reactApp>npm install react-router

ステップ2-コンポーネントの作成

このステップでは、4つのコンポーネントを作成します。 App コンポーネントはタブメニューとして使用されます。 他の3つのコンポーネント*（Home）、（About）および（Contact）*は、ルートが変更されるとレンダリングされます。

main.js

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

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;

ステップ3-ルーターを追加する

次に、アプリにルートを追加します。 前の例のように App 要素をレンダリングする代わりに、今回は Router がレンダリングされます。 また、ルートごとにコンポーネントを設定します。

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home}/>
         <Route path = "home" component = {Home}/>
         <Route path = "about" component = {About}/>
         <Route path = "contact" component = {Contact}/>
      </Route>
   </Router>
), document.getElementById('app'))

アプリを起動すると、ルートを変更するために使用できる3つのクリック可能なリンクが表示されます。

クリック可能なリンク