ルータ内のコンポーネントに小道具を渡す

Question

私のアプリケーションにURLパスを使用したいと思います。私はreact-routerを使用してみましたが、私は子コンポーネントに小道具を送信する方法を理解していない

render() { 
    return (
    <Main 
     isLoggedIn={this.state.isLoggedIn} 
     user={this.state.user} 
     ... /> 
) 
} 

（小道具は、変数や関数の集まりです）

：現在、私はちょうどapp.jsでMainコンポーネントをレンダリング。

<Router history={browserHistory} > 
    <Route path='/' component={Main} 
    ... where to send props? /> 
    <Route path='join' component={Join} 
    ... props /> 
</Router> 

問題は、私は（app.jsで）私のAppコンポーネントのいくつかの状態変数がMainとJoinの両方で利用可能にする必要があるということです。どのようにルータでそれを達成するのですか？

アプリケーション構造：

App 
- Join 
- Main 
    - ... 

Answer 1

です。 Reduxを使用する場合は、ルータでプロップを渡す必要はありません。接続を使用して任意のコンポーネントで簡単にアクセスできますが、反応を使用しない場合は、Reduxルータの階層機能を使用できます。

あなたがパスにアクセスするときに、この

<route path="/student" component={studentHome}> 
    <route path="/class" component={classHome} /> 
</route> 

のようなルートに何かを持っている

/student/class 

は、ルータがclassHomeコンポーネントにStudentHomeとすることができます簡単なパス小道具の子としてclassHomeコンポーネントをロードします反応します。

あなたの学生のクラスRenderメソッドは、子供たちに小道具を渡すことについて

render(){ 
    const childrenWithProps = React.Children.map(this.props.children, 
    (child) => React.cloneElement(child, { 
     doSomething: this.doSomething 
    }) 
    ); 

    return <div> some student component functionality 
       <div> 
       {childrenWithProps} 
       </div> 
      </div> 
} 

詳細のようなものになります。 How to pass props to {this.props.children}

Answer 2

あなたは、標準のURLパラメータを使用することができます。たとえば、IDを渡すには：

<Route path='join/:id' component={Join}/> 

あなたはbrowserHistoryを使用する必要があります：

browserHistory.push(`/join/${id}`); 

その後Joinにthis.props.params.idを使用しています。

は、ここでは、あなたの状態を管理しているどのように依存し、より詳細な説明https://stackoverflow.com/a/32901866/48869