リアクタのナビゲーションが動作しません

Question

私はリアサイズのJSテストアプリケーションをES6のリアクションルータで実装しましたが、動作していないようです。コードスニペット以下I：に移動

app.js 
------- 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Routes from './routes'; 

ReactDOM.render(Routes, document.getElementById('react-container')); 

routes.js 
--------- 

import React from 'react'; 
import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router'; 
import Page1 from './page1'; 
import Home from './home'; 
import { IndexRoute } from 'react-router'; 

let routes = 
    <Router> 
    <Route path="/" component={Home}> 
     <Route path="page1" component={ Page1 }/> 
    </Route> 
    </Router> 

export default routes 

home.js 
------- 

import React, { Component } from 'react'; 
import Header from './components/header'; 

export default class Home extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <Header /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

page1.js 
-------- 

import React, { Component } from 'react'; 

export default class Page1 extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <h1> Page 1 </h1> 
     </div> 
    ); 
    } 
} 

「/」と「/ページ1」は、単独で、ヘッダ部を示すページに着陸するように見えます。どんな助けもありがたい。

Answer 1

何もしていないときは、constructorを省略してください。デフォルトコンストラクタは次のとおりです。

constructor(...args) { 
    super(...args); 
} 

だから、暗黙の小道具の引数はHomeコンポーネントに渡され取得されていません。

Answer 2

/にナビゲートすると、page1が表示されるようですか？もしそうなら、あなたはデフォルトでpage1に/ルートを持っているIndexRouteが必要になりますdocs seem to indicate：

let routes = (
    <Router> 
    <Route path="/" component={Home}> 
     <IndexRoute component={Page1} /> 
    </Route> 
    </Router> 
); 

Answer 3

私はこれをテストすることができませんでしたが、私は歴史を提供することなく、反応-ルータをすることを考えますURLの場所を読み取ることができません。だから、/のパスだけをレンダリングすることは理にかなっています。

<Router history={browserHistory}> 
... 
</Router> 

Answer 4

回答の大半は、個別にこれらに触れ、私はあなたがこのような反応コンポーネントへのインデックスルート、ブラウザの履歴を組み合わせて、あなたのエクスポートを有効にする必要があると思う：

import { Router, browserHistory } from 'react-router' 

const Routes =() => { 
    return (
     <Router history={browserHistory}> 
      <Route path="/" component={Home}> 
       <IndexRoute component={Page1}/> 
      </Route> 
     </Router> 
    ) 
} 

export default Routes; 

これがすべきReact Router（2.0.0-rc5）の最新バージョンに有効です