ReactJSのルーター

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

第1ステップ-Reactルーターをインストールします

簡単なインストール方法react-routerこれはコマンドプロンプトウィンドウで以下のコードを実行します。

C：\　Users　\ユーザー名\　デスクトップ\　reactApp>　npm　install　react-router

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

このステップで、私たちは四つのコンポーネントを作成します。そのAppこれらのコンポーネントはタブメニューとして使用されます。ルートが変更された後(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>ホーム</li>
　　　　　　　　　　　　<li>アバウト</li>
　　　　　　　　　　　　<li>コンタクト</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つのクリック可能なリンクが表示されます。